@charset "utf-8";

/*========================
Reset
========================*/
div, p, th, td, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, select, textarea, blockquote{ padding:0; margin:0;}
form, fieldset, button	{ border: none;}
ul, dl, ol, li, dt, dd { list-style: none}
caption	{ display:none}
img { max-width: 100%; vertical-align:middle; padding: 0; margin: 0; border:0;}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block}
figure { margin: 0}
address	{ font-weight: normal; font-style: normal}
em, i { font-style: normal}
hr { display: none;height: 0; border: 0; margin: 0; padding: 0;}
blockquote, q { quotes: none;}
blockquote::before, blockquote::after, q::before, q::after{ content: ''; content: none;}
a:focus-visible { outline: 0}

/*
legend, caption, .invisible{ width:0; height:0; padding:0; font-size:0; line-height:0; overflow:hidden; position:absolute; visibility:hidden}
*/
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;}

h1, h2, h3, h4, h5, h6, strong	{ font-weight: 500}

p { font-size: 1em; color: #333; font-weight: 400}
label { font-size: 16px}
button { font-family: 'Poppins', 'Noto Sans KR', sans-serif; color: #333; font-weight: 400; line-height: 1.5}
button[type=button] { cursor: pointer}
video { max-width: 100%}

.flex1 { flex: 1}

.w-auto { width: auto !important}
.w100p { width: 100% !important}
.w80px { width: 80px !important}
.w100px { width: 100px !important}

.h100p { height: 100% !important}

.c-blue { color: #5396E3}
.c-green { color: #539B5C}

.nowrap { white-space: nowrap !important}

a.under { text-decoration: underline; color: #3c8dbc}
.bold-500 { font-weight: 500}
.bold-600 { font-weight: 600}
.bold-700 { font-weight: 700}

.pt0 { padding-top: 0 !important}
.pt10 { padding-top: 10px !important}
.pt15 { padding-top: 15px !important}
.pt20 { padding-top: 20px !important}
.pb0 { padding-bottom: 0px !important}
.pb20 { padding-bottom: 20px !important}
.pb30 { padding-bottom: 30px !important}
.pb40 { padding-bottom: 40px !important}
.pb50 { padding-bottom: 50px !important}

.m0 { margin: 0px !important}
.mr5 { margin-right: 5px !important}
.mr10 { margin-right: 10px !important}
.mt0 { margin-top: 0px !important}
.mt5 { margin-top: 5px !important}
.mt10 { margin-top: 10px !important}
.mt15 { margin-top: 15px !important}
.mt20 { margin-top: 20px !important}
.mt25 { margin-top: 25px !important}
.mt30 { margin-top: 30px !important}
.mb0 { margin-bottom: 0px !important}
.mb10 { margin-bottom: 10px !important}
.mb20 { margin-bottom: 20px !important}
.mb30 { margin-bottom: 30px !important}
.ml10 { margin-left: 10px !important}
.ml15 { margin-left: 15px !important}
.ml20 { margin-left: 20px !important}
.ml30 { margin-left: 30px !important}
.ml-auto { margin-left: auto !important}


/*========================
Common
========================*/
html, body { width: 100%; font-size: 16px; margin: 0; padding: 0; background: #fff; overscroll-behavior: none}
body { position: relative; font-family: 'Poppins', 'Noto Sans KR', sans-serif; color: #333; font-weight: 400; line-height: 1.5; letter-spacing: -0.5px; -webkit-text-size-adjust: 100%; overflow-x: hidden}

body.app-index { background: #212322}

body.back-bg { background: #fff}
/*body.back-bg::before { content: ""; position: absolute; left: 50%; top: 0; width: 100%; max-width: 575px; height: 100%; background: #F3F5F6; transform: translateX(-50%); margin-left: 0; z-index: 0}*/
body.back-bg::before { content: ""; position: absolute; left: 50%; top: 0; width: 100%; max-width: 575px; height: 100%; background: #F3F5F6; transform: translateX(-50%); margin-left: 0; z-index: 0}
body.main-bg::before { background: #F2F8FD}

*,::after,::before { box-sizing: border-box}
a { color: #333; text-decoration: none}
a.link {color: #046bcc; text-decoration: underline;}
.app-index .conbox { max-width: 500px; padding: 0 20px; margin: 0 auto}
.conbox { position: relative; padding: 0 20px}
.conbox.small { padding: 0 10px}
.not-scroll { position: fixed; overflow: hidden; width: 100%; height: 100%}

/*@media (min-width: 576px){
	body::before { content: ""; position: absolute; left: 50%; margin-left: -288px; top: 0; width: 1px; height: 100%; background: #eee; z-index: 11}
	body::after { content: ""; position: absolute; right: 50%; margin-right: -288px; top: 0; width: 1px; height: 100%; background: #eee; z-index: 11}	
}*/


/*========================
admin-materialize 수정
========================*/
.btn:focus,.btn-large:focus,.btn-small:focus,.btn-floating:focus { background-color: #3E4685;}
.btn, .btn-large, .btn-small { letter-spacing: 0; border: 1px solid transparent; background: #3E4685; box-shadow: none}
.btn:hover,.btn-large:hover,.btn-small:hover { background-color: #3E4685;}
.btn.btn-outline { background-color: #fff; border-color: #3E4685; color: #3E4685}

.btn.btn-big { display: flex; align-items: center; justify-content: center; width: 100%; height: 42px; font-size: 14px; font-weight: 500; border-radius: 25px;}

.modal { background: #fff; box-shadow: none;}
.modal-overlay { max-width: 575px; margin-left: auto; margin-right: auto}
.left { float: none !important}
.right { float: none !important}

@media (min-width: 576px){
	.modal { width: 80%; max-width: 400px}
	.datepicker-modal, .timepicker-modal { max-width: 500px}
}
.timepicker-modal { min-width: 290px}
.timepicker-text-container { font-size: 3rem; font-weight: 600}
.timepicker-display-am-pm { left: 1rem; right: auto; top: 50%; bottom: auto; transform: translateY(-50%)}

@media (min-width: 601px){
	.timepicker-display-am-pm { left: auto; top: auto; transform: none}
}

input[type=text]:not(.browser-default):focus:not([readonly]) { border-bottom: 1px solid #5396E3; box-shadow: 0 1px 0 0 #5396E3;}
input[type=text]:not(.browser-default):focus:not([readonly])+label { color: #5396E3;}

@media (max-width: 575px){
	.modal .modal-content { padding: 20px}
}


/*========================
Form
========================*/
select { -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;}
select::-ms-expand { display: none}
input, textarea, select { font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 15px; color: #333}
input::placeholder { color: #aaa;}
textarea::placeholder { color: #aaa;}

/* form basic */
.form-basic { position: relative; display: block; width: 100%; height: 40px !important; font-size: 16px !important; line-height: 1.5; letter-spacing: -0.5px; border: 1px solid transparent !important; background: #eff5ef !important; border-radius: 4px !important; box-sizing: border-box !important; padding: 0 10px !important; margin: 0 !important}
.form-basic:focus { outline: 0 !important; border-bottom-color: #ddd !important; box-shadow: none !important}
.form-basic.outline { height: 50px !important; border-color: #ddd !important; background: #fff !important; padding: 0 15px !important}
.form-basic.arr { background: url("/assets/img/app/select_arr.svg") right 10px center no-repeat #fff !important; padding: 0 35px 0 15px !important; cursor: pointer}
.form-basic.mt10 { margin-top: 10px !important}
.form-basic.mt15 { margin-top: 15px !important}

input[type='month'] { position: relative}
input[type='month'].form-basic { background: url("/assets/img/app/ico_cal.svg") right 10px center no-repeat #eff5ef !important; padding-right: 5px !important; }
input[type='month']::-webkit-calendar-picker-indicator { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent; color: transparent; cursor: pointer;}

select.form-basic { background: url("/assets/img/app/select_arr.svg") right 10px center no-repeat #eff5ef !important; padding: 0 35px 0 15px !important}
select.form-basic.round { border-radius: 30px !important; background-position: right 20px center !important; padding: 0 50px 0 20px !important; background-color: #fff !important; border-color: #ccc !important;}
select.form-basic.outline { background: url("/assets/img/app/select_arr.svg") right 10px center no-repeat #fff !important; padding: 0 35px 0 15px !important}

select.form-basic option:not(:checked) { background-color: #fff;}

textarea.form-basic { height: auto !important; padding: 15px !important}
textarea.form-basic.basic { height: 200px !important}
textarea.form-basic.outline { height: auto !important; padding: 15px !important}

.form-group { position: relative; padding: 30px 0}
.form-group + .form-group { border-top: 1px solid #333}

.form-item + .form-item { margin-top: 20px}
.form-item + .btn-line { margin-top: 20px}

.form-flex { display: flex; align-items: center; gap: 0 10px}
.form-flex.gap5 { gap: 0 5px}
.form-flex.gap20 { gap: 0 20px}
.form-flex .col { display: inline-block; font-size: 0}

/*.form-basic.cal { border-color: #f5f5f5 !important; background: url("/assets/img/app/ico_cal.svg") right 10px center no-repeat #f5f5f5 !important}*/

/* input file */
.file-box label { cursor: pointer}
.file-box label.form-basic { display: flex; align-items: center; font-size: 15px !important; border: 1px dashed #ccc !important}
.file-box label.form-basic span { display: block; color: #333; background: url("/assets/img/app/file_add.svg") 0 center no-repeat; padding-left: 20px}
.file-box label.btn-img-choice { display: block; width: 100%; height: 100%; border: 1px dashed #ccc; border-radius: 10px; background: url("/assets/img/app/ico_camera_line.svg") center no-repeat}

.preview-box { position: relative}
.preview-box .img { position: relative; display: block; width: 100%; height: 250px; border-radius: 10px; overflow: hidden}
.preview-box .img img { display: block; width: 100%; height: 100%; object-fit: cover}
.preview-box .img .btn-close { position: absolute; right: 0; top: 0; display: block; width: 40px; height: 40px; background: url("/assets/img/app/ico_data_del.svg") center /24px no-repeat}

.file-box + .preview-box { margin-top: 15px}

/* input close btn */
.input-box { position: relative; height: 50px}
.input-box .form-basic { padding-right: 40px}
.input-box .btn-clear { position: absolute; right: 15px; top: 50%; display: block; width: 20px; height: 20px; background: url("/assets/img/app/ico_clear.svg") center /contain no-repeat; transform: translateY(-50%)}

label.tit, span.tit { position: relative; display: block; font-size: 14px; color: #333; font-weight: 500; white-space: nowrap; margin-bottom: 5px}
label.star::after { content: "*"; display: inline-block; font-size: 16px; color: #ff3835; font-weight: 500; line-height: 1; vertical-align: middle; margin-left: 5px}

/* Radio & Checkbox */
input.checkradio { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
input.checkradio + label { position: relative; display: inline-flex; align-items: center; cursor: pointer; font-size: 1rem; color: #333}
input.checkradio + label > span { display: inline-block; padding-left: 8px; margin-top: 2px}
input.checkradio.solo + label > span { text-indent: -9999px; padding-left: 0}
/*input.checkradio + label::before { content: ""; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width:18px; height:18px; border:1px solid #ccc; background: transparent;}*/
input.checkradio + label::before { content: ""; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width:20px; height:20px; border:1px solid #ccc; border-radius: 4px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d9d9d9' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-position: center; background-size: 14px; background-color: #fff; background-repeat: no-repeat;}
input.checkradio:checked + label::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-color: #f44336; border-color: #f44336;}

input.checkradio.fs14 + label { font-size: 14px}

/* Radio */
input[type=radio].checkradio + label::before { background: #fff; border-radius: 50%}
input[type=radio].checkradio:checked + label::before { background: #fff;}
input[type=radio].checkradio:checked + label::after { content: ""; position: absolute; top: 50%; left: 6px; width: 8px; height: 8px; background: #f44336; border-radius: 50%; transform: translateY(-50%)}
input[type=radio].checkradio:checked + label > span { color: #f44336}

/* btnn */
.btnn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 40px; font-size: 14px; color: #333; font-weight: 500; line-height: 1; letter-spacing: 0; background-color: transparent; border: 1px solid transparent; user-select: none; white-space: nowrap; cursor: pointer; transition: all 0.15s ease-in-out; border-radius: 5px}
.btnn.btnn-sm { height: 30px; font-size: 13px}
/*.btnn.btnn-sm i { font-size: 20px}*/
.btnn.btnn-auto { width: auto; padding: 0 15px}
.btnn.btnn-flex span { display: flex; align-items: center}
.btnn.btnn-flex span i { display: block; font-size: 20px; color: #555; margin-right: 5px}

.btnn.btnn-80 { width: 80px; height: 30px; font-size: 13px; border-color: #aaa; border-radius: 15px; background: #fff}
.btnn.btnn-down { width: auto; height: 40px; font-size: 13px; color: #fff; background: #149c51; border-color: #149c51; padding: 0 10px}
.btnn.btnn-down i { font-size: 20px; color: #ebe25c; margin-right: 5px}
.btnn.btnn-down span { display: block; margin-top: 1px}

.btnn.btnn-btn { width: auto; height: 40px; font-size: 13px; color: #111; border-color: #ddd; border-radius: 20px; background: #fff; padding: 0 20px}
.btnn.btnn-btn span { display: inline-block; background: 0 center /12px no-repeat #fff; padding: 5px 0 5px 20px}
.btnn.btnn-down2 span { background-image: url("/assets/img/app/ico_down_solo.svg")}
.btnn.btnn-bring span { background-image: url("/assets/img/app/ico_load.svg")}
.btnn.btnn-copy span { background-image: url("/assets/img/app/ico_copy.svg"); background-size: 14px}

/*.btnn.btnn-basic { color: #fff; background: #5396E3; border-color: #5396E3}*/
.btnn.btnn-basic { color: #fff; background: #539B5C; border-color: #539B5C}
.btnn.btnn-dark { color: #fff; background: #333; border-color: #333}
.btnn.btnn-orange { color: #fff; background: #fbb34f; border-color: #fbb34f}
.btnn.btnn-darkblue { color: #fff; background: #3E4685; border-color: #3E4685}
.btnn.btnn-darkblueA { color: #fff; background: #AFB4BF; border-color: #AFB4BF}
.btnn.btnn-darkblue7 { color: #fff; background: #76a2d1; border-color: #76a2d1}
.btnn.btnn-darkblue5 { color: #fff; background: #52555C; border-color: #52555C}
.btnn.btnn-red { color: #fff; background: #f44336; border-color: #f44336}
.btnn.btnn-green { color: #fff; background: #149c51; border-color: #149c51}
.btnn.btnn-blue { color: #fff; background: #4a71e0; border-color: #4a71e0}

/*.btnn.btnn-outline-basic { color: #5396E3; background: #fff; border-color: #5396E3}*/
.btnn.btnn-outline-basic { color: #539B5C; background: #fff; border-color: #539B5C}
.btnn.btnn-outline-orange { color: #ea8f12; background: #fff; border-color: #fbb34f}
.btnn.btnn-outline-dark { color: #333; background: #fff; border-color: #333}
.btnn.btnn-outline-darkblue { color: #3E4685; background: #fff; border-color: #3E4685}
.btnn.btnn-outline-darkblue7 { color: #76a2d1; background: #fff; border-color: #76a2d1}
.btnn.btnn-outline-gray6 { background: #fff; border-color: #666; color: #52555C}
.btnn.btnn-outline-graya { background: #fff; border-color: #aaa}
.btnn.btnn-outline-grayd { background: #fff; border-color: #ddd}
.btnn.btnn-outline-red { background: #fff; border-color: #f44336; color: #f44336}

.btnn.round { width: auto; border-radius: 40px; padding: 0 15px}
.btnn.btnn-sm.round { font-size: 12px}
.btnn.w-auto { padding: 0 15px}
.btnn-btm { height: 50px; font-size: 15px; border-radius: 0; margin-top: 50px}

.btn-search { width: 80px; color: #fff; background: #52555C; border-color: #52555C}
.btn-search span { display: block; background: url("/assets/img/app/ico_search_gray.svg") 0 center no-repeat; padding: 5px 0 5px 20px;}
.btn-outline-search { width: 80px; color: #333; background: #fff; border-color: #52555C}
.btn-outline-search span { display: block; background: url("/assets/img/app/ico_search.svg") 0 center no-repeat; padding: 5px 0 5px 20px;}
.btn-excel { color: #52555C; background: #fff; border-color: #67AA87}
.btn-excel span { display: block; background: url("/assets/img/app/ico_excel.svg") 0 center no-repeat; padding: 5px 0 5px 20px}
.btnn.btn-all-child { height: 46px; justify-content: flex-start; border-radius: 40px; border: 1px solid #d9d9d9; background: url(/assets/img/app/ico_std_select_arr.svg) right 20px center no-repeat #fff; padding: 0 20px}

/* btn-form */
.btn-form { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; min-height: 48px; color: #666; border: 1px solid #ddd; border-radius: 4px; padding: 6px 10px}
.btn-form span { display: block; font-size: 15px; font-weight: 500}
.btn-form em { display: block; font-size: 13px; font-weight: 400}
.btn-form.on { color: #fff; border-color: #333; background: #333}
.form-flex .btn-form { flex: 1}

/* btn-edit */
.btn-edit { position: relative; display: block; width: 26px; height: 26px; background: #999; border-radius: 50%;}
.btn-edit::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; background: url("/assets/img/app/ico_camera_w.svg") center /contain no-repeat}
.btn-edit span { display: block; text-indent: -9999px}
.btn-edit:focus { background: #999}
/*.btn-edit { position: relative; display: block; width: 26px; height: 26px; background: #6c73a2; border-radius: 50%;}*/

/* btn-medicine : add, del */
.btnn.btn-medicine-del { position: absolute; right: 0; top: 10px; width: auto; background: #eee; padding: 0 8px 0 6px; z-index: 5}
.btnn.btn-medicine-del i { display: block; font-size: 22px; color: #555; margin-right: 3px}
.btnn.btn-medicine-del span { display: block}

.btnn.btn-medicine-add i { display: block; font-size: 22px; color: #555; margin-right: 3px}
.btnn.btn-medicine-add span { display: block}

/* badge */
.badgee { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 30px; font-size: 13px; color: #333; font-weight: 500; line-height: 1; letter-spacing: 0; background-color: transparent; border: 1px solid transparent; user-select: none; white-space: nowrap; transition: all 0.15s ease-in-out; border-radius: 15px; padding: 0 10px}

/* switch */
.switch-btn input[type="checkbox"] { display: none}
.switch-btn label { display: flex; align-items: center}
.switch-btn .marble { position: relative; display: block; width: 44px; height: 22px; background: #ddd; border-radius: 14px; cursor: pointer}
.switch-btn .marble:after { content: ""; position: absolute; top: 50%; left: 4px; transform: translateY(-50%); background: #fff; border-radius: 50%; width: 14px; height: 14px; transition: left 250ms linear;}
.switch-btn .marble + span { font-size: 14px; margin-left: 5px}
/*.switch-btn input[type="checkbox"]:checked + label .marble { background: #F8B62D;}*/
.switch-btn input[type="checkbox"]:checked + label .marble { background: #ee5750;}
.switch-btn input[type="checkbox"]:checked + label .marble::after { left: calc(100% - 18px);}

.btn-line { display: flex; align-items: center; justify-content: center}
.btn-line.left { justify-content: flex-start}
.btn-line.right { justify-content: flex-end}
.btn-line.lr { justify-content: space-between}
.btn-line > * + * { margin-left: 10px}

.btn-line.header-in { position: fixed; top: 15px; right: 10px; z-index: 11}
.btn-line.header-in .btnn.btnn-auto { padding: 0 10px}
.btn-line.header-in > * + * { margin-left: 5px}
.btn-line.header-in .btnn.btnn-sm.solo { height: 34px; padding: 0 15px; margin-top: -2px}

.btn-line.up { }
.btn-line.up .btnn { height: 34px; border-radius: 5px; padding: 0 10px}
.btn-line.up .btnn.btnn-down2 span { padding-left: 15px; background-size: 10px}

@media (min-width: 576px){
	.btn-line.header-in { right: 50%; margin-right: -270px}
}
@media (max-width: 330px){
	.btn-line.header-in .btnn { font-size: 12px}
}


/*========================
Modal
========================*/
.madal-b-close { position: absolute; top: 24px; right: 24px; width: 30px; height: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; cursor: pointer}
.madal-b-close span { display: inline-block; text-indent: -9999px}

.modal p.basic { font-size: 15px; text-align: center}
.modal-header h4 { font-size: 16px; font-weight: 500}

/* modal for top */
.modal.modal-btm { display: block !important; top: auto !important; bottom: 0; transform: translateY(100%) !important; max-width: 575px; transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1); opacity: 1 !important}
.modal.modal-btm.open { transform: translateY(0) !important}

@media (max-width: 575px){
	.modal.modal-btm { width: 100%}
}

/* modal 100% */
/*.modal.modal100 { display: block !important; bottom: 0; top: 0 !important; width: 100%; max-width: 575px; height: 100%; max-height: 100%; border-radius: 0; transform: translateY(100%) !important; transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1); opacity: 1 !important}
.modal.modal100.open { transform: translateY(0) !important}*/

.modal.bottom-sheet.modal100 { }
.modal.modal100 { max-width: 575px; height: 100%; max-height: 100%; border-radius: 0; margin-left: auto; margin-right: auto}
.modal.modal100 .modal-header { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; padding: 0 20px;}
.modal.modal100 .modal-header.left { justify-content: flex-start}
.modal.modal100 .modal-header .btn-back.modal-close { position: absolute; left: 15px; top: 50%; transform: translateY(-50%)}

.modal.modal100 .modal-content { padding: 0}

@media (max-width: 992px){
	.modal.modal100 { width: 100%}
}

/* modal base% */
.modal.modal-base { }
.modal.modal-base .modal-header h4 { display: flex; align-items: flex-end; height: 40px; font-weight: 600; color: #000; padding: 0 20px}
.modal.modal-base .modal-header.line { border-bottom: 1px solid #ddd; padding-bottom: 15px}
.modal.modal-base .modal-header.line h4 { height: 35px}

.modal.modal-base .m-close { position: absolute; top: 8px; left: auto; right: 10px; width: 30px; height: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; cursor: pointer; transform: none}
.modal.modal-base .p-basic { display: flex; align-items: center; justify-content: center; min-height: 80px}
.modal.modal-base .modal-footer { height: auto; text-align: left; border-radius: 0; background: none; padding: 0;}
.modal.modal-base .modal-footer.right-con { background: #fafafa; text-align: right; padding: 4px 6px}

.modal.modal-base .modal-footer .btnn { height: 50px; border-radius: 0}
.modal.modal-base .modal-footer .btnn:disabled { opacity: 0.5; cursor: default}
.modal.modal-base .modal-footer .btn-line > * + * { margin-left: 0}


/*========================
Login index
========================*/
.app-index main { display: flex; justify-content: center; align-items: center}
/*.app-index .wrap { flex: 1}*/
.app-index header h1 { display: flex; flex-direction: column; align-items: center; font-size: 24px; color: #fff; font-weight: 700; letter-spacing: 0; margin: 0 0 25px 0}
.app-index header h1 .small { font-size: 13px; color: #bbb; font-weight: 400; margin-left: 20px}
.app-index header h1 .small.pc { display: block}
.app-index header h1 .small.mobile { display: none}
.app-index header h1 strong { display: flex; align-items: center; font-weight: 700}
.app-index header h1 strong img { display: block; width: 23px; margin-right: 10px}
.app-index header h1 strong .pc { display: block}
.app-index header h1 strong .mobile { display: none}

.app-index .btn-index  { display: flex; flex-wrap: wrap}
.app-index .btn-index a { display: flex; align-items: center; width: calc(50% - 5px); height: 200px; font-size: 20px; color: #212322; font-weight: 500; letter-spacing: -1px; border-radius: 30px; background: center center /cover no-repeat #f5f5f5;}
.app-index .btn-index a:nth-child(2n) { margin-left: 10px}
.app-index .btn-index a:nth-child(n+3) { margin-top: 10px}

.app-index .btn-index .btn-ac { background-image: url("/assets/img/academy_login_bg.jpg")}
.app-index .btn-index .btn-tc { background-image: url("/assets/img/teacher_login_bg.jpg")}
.app-index .btn-index .btn-st { background-image: url("/assets/img/student_login_bg.jpg")}
.app-index .btn-index .btn-pr { background-image: url("/assets/img/parents_login_bg.png")}

.app-index .btn-index a span { display: block; line-height: 1.1; margin: -15px 0 0 30px}

.app-index .footer .copy { font-size: 12px; color: #666; text-align: center; margin: 15px 0}
.app-index .copy-line { font-size: 12px; color: #666; text-align: center; margin: 15px 0}

@media (min-width: 1025px) and (max-height: 600px){
	.app-index header h1 { margin-bottom: 10px}
	.app-index .copy-line { margin-bottom: 0}
}

@media (max-width: 1024px){
	.app-index header h1 .small.pc { display: none}
	.app-index header h1 .small.mobile { display: block; margin-left: 0}
	
	.app-index header h1 strong .pc { display: none}
	.app-index header h1 strong .mobile { display: block}
}
@media (max-width: 575px){
	.br { display: block;}
	.app-index .btn-index a { height: 200px}
	.app-index .copy-line { display: none}
}
@media (max-width: 400px){
	.app-index .btn-index a span { margin-left: 25px}
}
@media (max-width: 330px){
	.app-index header h1 { margin: 20px 0 21px 0}
	.app-index .btn-index a { height: 160px}
	.app-index .btn-index a span { margin-left: 20px}
}

.personal-check .form-item { margin-top: 15px}
.personal-check input.checkradio + label { font-size: 15px; color: #fff}
.personal-check input.checkradio + label::before { border-color: #fff}
.personal-check input.checkradio + label > span { font-weight: 300;}
.personal-check input.checkradio:checked + label::before { border-color: #f44336}

@media (max-width: 575px){
	.personal-check .form-item { max-width: 250px; margin: 15px auto 0 auto}
	.personal-check input.checkradio + label { align-items: flex-start}
	.personal-check input.checkradio + label::before { margin-top: 4px}
}


/*========================
Header
========================*/
body.back-bg .wrap { background: #F3F5F6}
body.back-bg.main-bg .wrap { background: #F2F8FD}
.wrap { position: relative; width: 100%; max-width: 575px; margin: 0 auto}
.header { position: fixed; top: 0; left: 50%; max-width: 575px; width: 100%; height: 60px; background: #539B5C; transform: translateX(-50%); z-index: 10}
.header .conbox { display: flex; align-items: center; height: 100%}

.header h1 { font-size: 20px; font-weight: 600}
.header h1 img { width: 82px}
.header h1 img.kw { width: 110px}
.header h1 img.fp { width: 150px}

.header .util { margin-left: auto}
.header .util ul { display: flex; align-items: center; gap: 0 10px}
.header .util ul li a { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 20px; background: #468E4F}
.header .util ul li a img { height: 26px}
.header .util ul li a .num { position: absolute; right: -7px; top: 0; display: flex; justify-content: center; align-items: center; min-width: 18px; height: 18px; border-radius: 50%; background: #EE5750; font-size: 12px; color: #fff; padding: 0 3px}


/*========================
Slide menu
========================*/
.slide-box { position: relative; z-index: 21}
.slide-box .inner { position: fixed; top: 0; right: -100%; max-width: 500px; width: 100%; height: 100%; background: #fff; transition: all 0.5s ease; overflow-y: auto;}
.slide-bg { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); transition: all 0.5s ease; opacity: 0; z-index: 20}

.slide-box.open .inner { right: 0}
.slide-bg.on { display: block; opacity: 1;}

@media (max-width: 575px) {
	.slide-box.open { position: fixed;}
	.navBar.open .inner { width: 90%}
}

.slide-box .btn-slide-close { position: absolute; top: 15px; right: 15px; display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; font-size: 0; background: #fff; border-radius: 50%; z-index: 22}
.slide-box .btn-slide-close span { position: relative; display: block; width: 14px; height: 2px; background: transparent}
.slide-box .btn-slide-close span::before, .slide-box .btn-slide-close span::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; background: #555}
.slide-box .btn-slide-close span::before { transform: rotate(45deg)}
.slide-box .btn-slide-close span::after { transform: rotate(-45deg)}


/*========================
Slide mypage
========================*/
.navBar .top-con { position: relative; padding: 55px 0 0 0; margin-bottom: 20px; z-index: 1}
.navBar .top-con::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 105px; background: #eaf4eb; border-radius: 0 0 30px 30px}
.navBar .top-con .img-con { position: relative; display: flex; flex-direction: column; align-items: center}
.navBar .top-con .img { position: relative; display: block; width: 80px; height: 80px; background: #fff; border-radius: 50%; border: 1px solid #e9e9e9; margin-bottom: 15px; overflow: hidden}
.navBar .top-con .img img { display: block; width: 100%; height: 100%; object-fit: cover;}
.navBar .top-con .img.img-cover img { object-fit: cover}
.navBar .top-con .img.img-contain img { object-fit: contain}
.navBar .top-con .text { text-align: center}
.navBar .top-con .text > * { display: block}
/*
.navBar .top-con .text strong { font-size: 15px; color: #000; font-weight: 500}
.navBar .top-con .text em { font-size: 15px; color: #000; font-weight: 500}
.navBar .top-con .text span { font-size: 13px}
*/
.navBar .top-con .text strong { font-size: 17px; color: #333; font-weight: 600}
.navBar .top-con .text em { display: inline-block; font-size: 14px; color: #333; font-weight: 500;}
.navBar .top-con .text span { font-size: 13px; color: #666; font-weight: 500}


.navBar .btn-edit { position: absolute; left: 50%; top: 54px; transform: translateX(-50%); margin-left: 30px;}

.navBar .nav-list { border-top: 1px solid #666}
.navBar .nav-list li { position: relative; border-bottom: 1px solid #ddd}
.navBar .nav-list li a { display: block; font-size: 15px; color: #111; font-weight: 500; padding: 12px 20px;}
.navBar .nav-list li a::after { content: ""; position: absolute; right: 30px; top: 50%; width: 6px; height: 11px; transform: translateY(-50%); background: url("/assets/img/app/ico_arr_nav.svg") center /contain no-repeat}


/*========================
Footer
========================*/
.footer { padding: 10px 0 70px 0}
.footer .copy { font-size: 12px; text-align: center; margin: 15px 0}

@media (max-width: 575px) {
	.footer { display: none}
}


/*========================
Main
========================*/
.mainContent { padding-top: 60px}
.back-bg { background: #F3F5F6}

/*.main-top { position: relative; display: flex; flex-direction: column; background: #fff; z-index: 0}
.main-top::after { content: ""; position: absolute; left: 15px; right: 15px; top: 0; height: 80%; background: #FBF0DD; border-radius: 20px; z-index: -1}
.main-top img { display: block; margin-top: 10px}*/

.main-user { position: relative; display: flex; align-items: center; justify-content: center; height: 170px; background: #539B5C; border-radius: 0 0 50px 0; z-index: 0}
.main-user::after { content: ""; position: absolute; left: 0; bottom: -50px; width: 100%; height: 50px; background: #539B5C; z-index: -1}
.main-user::before { content: ""; position: absolute; left: 0; bottom: -50px; width: 150px; height: 150px; background: url("/assets/img/app/top_left_bg.svg") 0 bottom no-repeat; z-index: 1}

.user-box { display: flex; align-items: center; margin-top: -20px; z-index: 2}
/*.user-box .img { display: block; flex-shrink: 0; width: 70px; height: 70px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); overflow: hidden}*/
.user-box .img { position: relative; display: block; flex-shrink: 0; width: 70px; height: 70px; border-radius: 50%; margin: -40px 15px 0 0; overflow: hidden; z-index: 0}
.user-box .img::before { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; background: #6CB576; border-radius: 50%; transform: translate(-50%, -50%); z-index: -1} 

.user-box .img img { display: block; width: 100%; height: 100%; object-fit: cover}
.user-box .img.img-cover img { object-fit: cover}
.user-box .img.img-contain img { object-fit: contain}

.user-box .text { display: flex; flex-direction: column;}
.user-box .text strong { display: block; font-size: 20px; color: #fff; font-weight: 600; line-height: 1.3;}
.user-box .text strong em { display: inline-block; font-size: 14px; font-weight: 500;}
.user-box .text .cl-name { display: block; font-size: 13px; color: rgba(255, 255, 255, 0.7); font-weight: 500; margin-top: 2px}
.user-box .btn-go { margin-top: 10px}

.btn-go { display: flex; align-items: center; width: 92px; height: 30px; font-size: 12px; font-weight: 500; color: #fff; letter-spacing: 0; border: 1px solid #fbac4f; border-radius: 20px; background: url("/assets/img/app/main_user_arr.svg") right 10px center no-repeat; padding: 0 24px 0 12px}
.btn-go span { display: block}
.btn-go .eng { margin-top: -2px}

/*.user-box .right { flex-shrink: 0; display: flex; align-items: center; margin-right: 10px; margin-left: auto}
.user-box .right a { display: flex; align-items: center}
.user-box .right .info { display: block; font-size: 12px; color: #3e4685; font-weight: 500; letter-spacing: -0.5px; border-radius: 15px; background: #F2F4F8; padding: 6px 10px;}
.user-box .right img { display: block; padding: 0 10px}*/

.main-icon-list { position: relative; background: #fff; border-radius: 50px 0 0 0; padding: 40px 20px 80px 20px;}
.main-icon-list ul { display: flex; flex-wrap: wrap; gap: 30px 0; margin: 0 -5px}
.main-icon-list ul li { position: relative; width: calc(25% - 10px); margin: 0 5px}
.main-icon-list ul li.no-data { width: 100%; margin: 0 5px}
.main-icon-list ul li a { display: flex; flex-direction: column; align-items: center;}

.main-icon-list ul li .img { position: relative; display: flex; align-items: center; justify-content: center;}
.main-icon-list ul li .img img { display: block; width: 34px; height: 34px; object-fit: contain}
.main-icon-list ul li .img .num { position: absolute; right: -10px; top: -2px; display: flex; justify-content: center; align-items: center; min-width: 20px; height: 20px; border-radius: 50%; background: #EE5750; font-size: 12px; color: #fff; padding: 0 3px}
.main-icon-list ul li .txt { display: block; font-size: 14px; color: #666; font-weight: 500; margin-top: 10px}


/*========================
Navigation
========================*/
/*
.nav-btn-bar { background: #F2F8FD; padding: 10px 0 40px 0}
.nav-btn-bar .conbox { padding: 0 30px}
.nav-btn-bar .btn + .btn { margin-top: 15px}

@media (max-width: 575px) {
	.nav-btn-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 51px; background: #5396E3; border-top: 1px solid #5089cb; padding: 0; z-index: 11}
	.nav-btn-bar .conbox { display: flex; align-items: center; justify-content: center; height: 100%}
	.nav-btn-bar .btn { width: 40px; height: 40px; border-radius: 0; text-indent: -9999px}
	.nav-btn-bar .btn:hover { box-shadow: none}
	.nav-btn-bar .btn-edu { background: url("/chat/img/svg/edutest_symbol.svg") center center /26px no-repeat}
	.nav-btn-bar .btn-edu:disabled { opacity: 0.6; background-color: transparent !important}
	.nav-btn-bar .btn-chat { background: url("/assets/img/app/ico_chat.svg") center center /26px no-repeat; border-color: transparent}
	.nav-btn-bar .btn + .btn { margin: 0 0 0 20px}
}
*/

/*.nav-btn-bar { position: fixed; left: 0; right: 0; bottom: 0; max-width: 575px; height: 66px; display: flex; align-items: flex-end; justify-content: center; margin-left: auto; margin-right: auto; z-index: 10}
.nav-btn-bar::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 100%; height: 60px; transform: translateX(-50%); background: url("/assets/img/app/nav_bg.svg") center no-repeat; z-index: -1}
.nav-btn-bar .conbox { display: flex; align-items: center; justify-content: space-around; width: 100%; height: 60px;}

.btn-nav-btm { position: relative; display: flex; flex-direction: column; align-items: center; width: 40px; font-size: 10px; color: #aaa; font-weight: 500; margin-top: 4px}
.btn-nav-btm::before { content: ""; display: block; width: 30px; height: 30px}
.btn-nav-edu::before { background: url("/assets/img/app/nav_edu.svg") center no-repeat;}
.btn-nav-chat::before { background: url("/assets/img/app/nav_chat.svg") center no-repeat;}

.btn-nav-home { display: block; width: 50px; height: 50px; background: url("/assets/img/app/nav_home.svg") center no-repeat; margin-top: -22px; margin-left: 1px}
.btn-nav-home span { display: block; text-indent: -9999px}

@media ( min-width: 575px){
	.nav-btn-bar::before { background-image: url("/assets/img/app/nav_bg_gray.svg")}
	.main-bg .nav-btn-bar::before { background-image: url("/assets/img/app/nav_bg.svg")}
}*/

.nav-btn-bar { position: fixed; left: 0; right: 0; bottom: 0; max-width: 575px; height: 60px; display: flex; align-items: flex-end; justify-content: center; z-index: 10}
.nav-btn-bar .conbox { display: flex; align-items: center; justify-content: space-around; width: 100%; height: 50px; background: rgba(234, 244, 235, 0.95); border-radius: 25px; margin: 10px}
.back-bg .nav-btn-bar .conbox { background: rgba(255, 255, 255, 0.95)}

.btn-nav-btm { position: relative; display: flex; flex-direction: column; align-items: center; width: 36px; font-size: 12px; color: #333; font-weight: 500;}
.btn-nav-btm::before { content: ""; display: block; width: 22px; height: 22px}
.btn-nav-btm span { line-height: 1; margin-top: 3px}

.btn-nav-edu::before { background: url("/assets/img/app/nav_edu.svg") center /contain no-repeat;}
.btn-nav-edu:disabled::before { opacity: 0.6; cursor: default}
.btn-nav-chat::before { background: url("/assets/img/app/nav_chat.svg") center /contain no-repeat;}
.btn-nav-chat .num { position: absolute; right: -5px; top: -2px; display: flex; justify-content: center; align-items: center; min-width: 20px; height: 20px; border-radius: 50%; background: #EE5750; font-size: 12px; color: #fff; padding: 0 3px}
.btn-nav-home::before { width: 24px; height: 24px; background: url("/assets/img/app/nav_home.svg") center 4px /16px no-repeat #539B5C; border-radius: 50%}

@media ( min-width: 575px){
	.nav-btn-bar { margin-left: auto; margin-right: auto}
	.nav-btn-bar::before { background-image: url("/assets/img/app/nav_bg_gray.svg")}
	.main-bg .nav-btn-bar::before { background-image: url("/assets/img/app/nav_bg.svg")}
}


/*========================
Agree
========================*/
.app-agree { position: relative; font-size: 16px;}
.app-agree .app-agree-inner { padding-bottom: 30px}
.app-agree .madal-b-close { top: 30px; right: 30px}
.app-agree a { text-decoration: none}
.app-agree p { font-size: 1em; color: #333; font-weight: 400}
.app-agree input.checkradio + label { font-size: 16px; color: #000}
.app-agree input.checkradio + label::before { border-color: #666}
.app-agree input.checkradio:checked + label::before { border-color: #f44336}

@media (min-width: 576px){
	.modal.app-agree { max-width: 1000px}
}

.app-agree .conbox { position: relative}
.app-agree .title { margin-bottom: 50px}
.app-agree .title h1 { font-size: 26px; color: #000; font-weight: 400; line-height: 1.3; text-align: center; background: #f5f5f5; padding: 20px 0}
.app-agree .title h1 strong { display: block; font-weight: 700; letter-spacing: 0}

.app-agree h2 { position: relative; font-size: 20px; color: #000; font-weight: 500; line-height: 1.5; margin-bottom: 10px}
.app-agree h2::before { content: ""; position: absolute; left: 0; top: -8px; width: 24px; height: 3px; background: #f44336}
.app-agree h2 + p { line-height: 1.6; margin-bottom: 60px}

.app-agree .agree-form-header { display: flex; align-items: center; border-bottom: 1px solid #666; padding-bottom: 10px; margin-bottom: 40px}
.app-agree .agree-form-header h2 { margin-bottom: 0}
.app-agree .agree-form-header .form-item { margin-left: auto}

.app-agree h3 { position: relative; font-size: 18px; font-weight: 700; color: #000; margin-bottom: 15px}
.app-agree h4 { position: relative; font-size: 18px; font-weight: 500; padding-left: 10px; margin-bottom: 10px}
.app-agree h4::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; background: #f44336; transform: translateY(-50%)}
.app-agree h5 { position: relative; font-size: 16px; font-weight: 500; margin-bottom: 10px}

.app-agree .agree-box + .agree-box { border-top: 1px solid #ccc; padding-top: 50px; margin-top: 50px}
.app-agree .agree-box .inner { border: 1px solid #e9e9e9; padding: 25px}
.app-agree .agree-box .inner + .agree-line { display: flex; align-items: center; margin-top: 20px}
.app-agree .agree-line p { color: #000}	
.app-agree .agree-line .form-flex { gap: 0 25px; margin-left: auto}
.app-agree .agree-line .form-flex .form-item + .form-item { margin-top: 0}

.app-agree .overflow { }
.app-agree table { width: 100%; border-collapse: collapse; border-spacing: 0;}
.app-agree .table th, .table td { border: 1px solid #DAE1E6; padding: 10px}
.app-agree .table th { background: #F3F6FB; text-align: center; font-size: 14px; font-weight: 700; color: #222; white-space: nowrap}
.app-agree .table td { font-size: 16px}	
.app-agree .table.center td { text-align: center}	
.app-agree .table.center td.left { text-align: left}
.app-agree .overflow + p { font-size: 14px; margin-top: 15px}
.app-agree .table + p { font-size: 14px; margin-top: 15px}

.app-agree .btn-line { height: 100%}
.app-agree .btn-agree { display: flex; justify-content: center; align-items: center; width: 80px; height: 36px; font-size: 14px; color: #fff; background: #f44336; border-radius: 4px}
.app-agree .btn-agree.btn-agree-gray { background: #999}	

@media (max-width: 1200px){
	.app-agree.modal { width: 70%}
}
@media (max-width: 991px){
	.app-agree.modal { width: 80%}
	.app-agree { font-size: 14px}
	.app-agree input.checkradio + label { font-size: 14px}
	.app-agree .title h1 { font-size: 20px; padding: 15px 0}
	.app-agree .title { margin-bottom: 40px}
	.app-agree h2 { font-size: 18px;}
	.app-agree h2::before { width: 20px}
	.app-agree .agree-form-header { margin-bottom: 30px}

	.app-agree h2 + p { margin-bottom: 40px}
	.app-agree h3 { font-size: 16px}
	.app-agree h4 { font-size: 16px}
	.app-agree h5 { font-size: 14px}

	.app-agree .agree-box + .agree-box { padding-top: 40px; margin-top: 40px}
	.app-agree .agree-box .inner { padding: 15px}
	.app-agree .agree-box .inner + .agree-line { margin-top: 15px}
	.app-agree .agree-line .form-flex { gap: 0 20px}

	.app-agree .overflow { overflow-x: auto}
	.app-agree .overflow .table { min-width: 500px}
	.app-agree .table td { font-size: 14px}

	.app-agree .btn-agree { width: 80px; height: 40px}
}
@media (max-width: 767px){
	.app-agree .agree-box .inner + .agree-line { flex-direction: column; align-items: flex-start}
	.app-agree .agree-line .form-flex { gap: 0 25px; margin: 5px 0 0 0}	
}
@media (max-width: 575px){
	.app-agree.modal { width: 90%; height: 80%; max-height: 80%}
	.app-agree.modal .modal-content { padding: 15px}
	.app-agree .madal-b-close { top: 15px; right: 15px}
	.app-agree .app-agree-inner { padding-bottom: 10px}
	.app-agree .title { margin-bottom: 30px}

	.app-agree .title h1 { font-size: 18px; line-height: 1.3}
	.app-agree h2 { font-size: 16px;}
	.app-agree h2 + p { margin-bottom: 30px}
	.app-agree .agree-form-header { padding-bottom: 5px; margin-bottom: 20px}
	.app-agree .agree-form-header .form-item { margin-bottom: 5px}

	.app-agree h3 { font-size: 15px; margin-bottom: 10px}

	.app-agree .agree-box + .agree-box { padding-top: 30px; margin-top: 30px}
	.app-agree .agree-box .inner { padding: 10px}
	.app-agree .table th { font-size: 13px}
	.app-agree .table + p { font-size: 13px; margin-top: 10px}
}


/*========================
Contents Common
========================*/
.conbody { padding: 0 0 80px 0; margin-top: 60px}
.conbody.t-line { border-top: 1px solid #eee}

/* Header */
/*.con-header { position: sticky; top: 0; display: flex; align-items: center; justify-content: center; height: 60px; background: #fff; padding: 0 20px; z-index: 10}*/
.con-header { position: fixed; top: 0; left: 50%; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 575px; height: 60px; background: #fff; transform: translateX(-50%); padding: 0 20px; z-index: 10}
.con-header.line { border-bottom: 1px solid #eee}
.con-header .left, .con-header .right { position: absolute; top: 50%; transform: translateY(-50%)}
.con-header .left { left: 15px}
.con-header .right { right: 15px}
.con-header h1 { font-size: 16px; font-weight: 500}

.con-header.start { justify-content: flex-start}
.con-header.start h1 { padding-left: 35px}

.con-header.between { justify-content: space-between; padding: 0 15px}
.con-header.between .left { position: relative; top: auto; left: 0; transform: none}

.btn-page-close { display: block; width: 30px; height: 30px; background: url("/assets/img/app/ico_close.svg") center no-repeat}

.btn-back { display: block; width: 30px; height: 30px; background: url("/assets/img/app/ico_arr_back.svg") center no-repeat}

/* Section */
.section-item { padding: 0 20px}
.section-item .sec-tit h2 { font-size: 16px; font-weight: 700; padding: 13px 0}
.section-item .sec-tit h2.round { display: flex; align-items: center; justify-content: center; height: 40px; font-size: 15px; font-weight: 600; border-radius: 20px; background: #f4f4f4; margin-bottom: 10px}
.section-item .sec-tit h2 strong { display: block; font-weight: 700}
.section-item .sec-tit h2 em { display: inline-block; font-size: 13px; font-weight: 500}

.divide { width: 100%; height: 8px; background: #eee; margin: 10px 0}
.divide.dark { background: #e6e6e6}
.divide-h1-20 { width: 100%; height: 1px; background: #ddd; margin: 20px 0}
.divide-20 { width: 100%; height: 8px; background: #eee; margin: 20px 0}
.divide-30 { width: 100%; height: 8px; background: #eee; margin: 30px 0}
.divide-dot { width: 100%; height: 1px; border-bottom: 1px dashed #ddd}
.divide-dot-10 { width: 100%; height: 1px; border-bottom: 1px dashed #ddd; margin: 10px 0}

/* menu */
.list-menu ul li { position: relative}
.list-menu ul li a { display: flex; align-items: center; font-size: 15px; padding: 12px 25px 12px 0}
.list-menu ul li a::after { content: ""; position: absolute; right: 0; top: 50%; width: 12px; height: 12px; background: url("/assets/img/app/ico_menu_arr.svg") center no-repeat; transform: translateY(-50%)}
.list-menu ul li .info { display: block;}
.list-menu ul li .info span { display: block; font-size: 12px; color: #888}
.list-menu ul li .info em { display: block; font-size: 15px; font-weight: 500; letter-spacing: 0; word-break: break-all;}

.list-menu.line ul li { border-top: 1px solid #eee}
.list-menu.line ul li:first-child { border-top: 0}
.list-menu ul li.no-change a { pointer-events: none; cursor: default;}
.list-menu ul li.no-change a::after { content: none}
.list-menu ul li.no-arr a::after { content: none}

/* switch */
.list-switch ul li { display: flex; align-items: center; border-top: 1px solid #eee; padding: 14px 0}
.list-switch ul li:first-child { border-top: 0}
.list-switch ul li.no-data { justify-content: center;}
.list-switch ul li .con-area { flex: 1; display: flex; margin-right: 30px}
.list-switch ul li .con-area .img { flex-shrink: 0; width: 20px; height: 20px; margin-right: 10px}
.list-switch ul li .con-area .img img { display: block; width: 100%; height: 100%; object-fit: contain}
.list-switch ul li .con-area .text strong { display: block; font-size: 15px; color: #111; margin-bottom: 3px}
.list-switch ul li .con-area .text p { font-size: 12px; color: #666; line-height: 1.3}
.list-switch ul li .switch-area { margin-left: auto}

/* Board List */
.list-board ul li { position: relative; border-top: 1px solid #eee; padding: 14px 0}
.list-board ul li:first-child { border-top: 0}
.list-board ul li a { position: relative; display: block; padding-left: 12px;}
.list-board ul li a::before { content: ""; position: absolute; left: 0; top: 7px; display: block; width: 7px; height: 7px; background: #ee5750; border-radius: 50%;}
.list-board ul li .preview { display: flex; justify-content: space-between}
.list-board ul li .preview .text { flex: 1; text-overflow: ellipsis; overflow: hidden;}
.list-board ul li .preview .text .subject { position: relative; display: block; font-size: 15px; font-weight: 500; color: #000; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 5px; overflow: hidden;}
.list-board ul li .preview .text p { font-size: 13px; color: #999; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 40px; overflow: hidden;}
.list-board ul li .preview .text .date { display: block; font-size: 13px; color: #666; font-weight: 400; letter-spacing: 0;}
/*.list-board ul li .preview .img { flex-shrink: 0; width: 80px; height: 80px; border-radius: 10px; background: #ddd; margin-left: 30px; overflow: hidden}
.list-board ul li .preview .img img,
.list-board ul li .preview .img video { display: block; width: 100%; height: 100%; object-fit: cover}*/

.list-board ul li .preview .thumb-img { margin-left: 20px}
.list-board ul li .preview .con-info { display: flex; align-items: center; gap: 0 20px; margin-top: 10px}
.list-board ul li .preview .con-info .file-add-num { line-height: 1.3}

.list-board ul li.read a::before { background: #fff}
/*.list-board ul li.read a .preview .text .subject { color: #666}*/

.no-data { font-size: 14px; text-align: center; padding: 30px 0 !important}

/* Board View */
/*.view-board .view-top { background: #F3F6FB; padding: 20px}*/
.view-board .view-top { background: #f4f4f4; padding: 20px 20px 16px 20px}
.view-board .view-top .subject { display: block; font-size: 17px; color: #000; font-weight: 500; line-height: 1.4}
.view-board .view-top .date { display: block; font-size: 12px; color: #666; font-weight: 400; letter-spacing: 0; margin-top: 5px}

.view-con { font-size: 15px; line-height: 1.6; padding: 30px 20px}
.view-con p { font-size: 15px; line-height: 1.7; letter-spacing: 0; word-break: break-all}
.view-con .data-in { padding: 20px 0}
figure.img, 
figure.media { text-align: center;}
figure.media { font-size: 0; line-height: 1}
figure.img img, 
figure.media img { display: inline-block;}
figure.img a { display: block}
figure.media video { height: auto}
figure.img figcaption, 
figure.media figcaption { font-size: 14px; text-align: center; word-break: break-all; margin-top: 10px}
.view-con figure.img, .view-con figure.media { padding: 20px 0}
.view-con .data-in + figure.media { padding-top: 0}

/* Contents View */
.view-box .name { position: relative;}
.view-box .name p { display: flex; align-items: center; height: 40px; font-size: 13px; color: #000; font-weight: 400; background: #f5f5f5; padding: 0 20px}
.view-box .name strong { display: block; margin-right: 5px}

.view-box .name .read-yet { position: absolute; right: 20px; top: 50%; display: flex; gap:0 5px; transform: translateY(-50%)}
.badgee.bell-off { background-color: #fff}
.badgee.bell-off em { display: inline-block; background: 0 center /12px no-repeat; padding: 5px 0 5px 18px; background-image: url("/assets/img/app/ico_bell_off.svg")}

.view-box .subject { position: relative; padding: 20px 20px 15px 20px}
.view-box .subject::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; background: #333}
.view-box .subject p { font-size: 16px; color: #000; font-weight: 500; word-break: break-all}

/* Month line */
.month-line { position: relative; display: flex; align-items: center; width: 100%; height: 40px; background: #DBE4F3; border-radius: 20px; padding: 0 20px}
.month-line.center { justify-content: center}
.month-line.line { border: 1px solid #ddd; background: #fff}
/*.month-line.shadow { background: #fff; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.12)}*/
.month-line.shadow { background: #fff; border: 1px solid #e9e9e9}
.month-line span { display: block; font-size: 14px; font-weight: 500; letter-spacing: 0}

.month-line.nobar { height: auto; border-radius: 0; background: none; padding: 0}
.month-line.nobar span { font-size: 16px; color: #333; font-weight: 600}

/* thumbnail */
.thumb-img { position: relative; flex-shrink: 0; width: 70px; height: 70px; border-radius: 10px; overflow: hidden;}
.thumb-img img { display: block; width: 100%; height: 100%; object-fit: cover}
.thumb-img.audio-in { display: flex; align-items: center; justify-content: center; background: url("/assets/img/app/ico_audio.svg") center /cover no-repeat}
.thumb-img.video-in { display: flex; align-items: center; justify-content: center; background: url("/assets/img/app/ico_video.svg") center /cover no-repeat}

/* Period */
.list-period + .month-line { margin-top: 20px}
.list-period + .month-line.nobar { padding-top: 25px; margin-top: 30px;}
.list-period + .month-line.nobar::after { content: ""; position: absolute; top: 0; left: -20px; right: -20px; height: 1px; background: #ddd}

.list-period ul li { background: #fff; border-radius: 20px; padding: 15px 15px 20px 15px; margin-top: 12px}
.list-period ul li a { position: relative; display: block}

.list-period ul li .header-box { display: flex; align-items: center; margin-bottom: 15px}
.list-period ul li .date { flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 60px; height: 60px; line-height: 1.05; background: #D0EFCC; border-radius: 50%; margin-right: 12px}
.list-period ul li .date strong { display: block; font-size: 22px; color: #333; font-weight: 600; letter-spacing: 0}
.list-period ul li .date span { display: block; font-size: 12px; font-weight: 500}
.list-period ul li .subject { flex: 1}
.list-period ul li .subject p { display: flex; align-items: center; font-size: 16px; color: #000; font-weight: 500; word-break: break-all}
.list-period ul li .subject p span { position: relative; display: block; font-size: 14px; color: #666; padding-left: 22px}
.list-period ul li .subject p span::before { content: ""; position: absolute; left: 11px; top: 50%; width: 1px; height: 100%; background: #ddd; transform: translateY(-50%)}
.list-period ul li .subject .small { display: block; font-size: 13px; color: #666}
.list-period ul li .sch-icon { flex-shrink: 0; margin-left: 12px}

.list-period ul li .body-box { display: flex; justify-content: space-between; margin-left: 70px}
.list-period ul li .body-box .text { flex: 1}
.list-period ul li .body-box .text p { font-size: 15px; color: #000; letter-spacing: 0; padding-bottom: 10px}
.list-period ul li .body-box .text .writer { display: block; font-size: 13px; font-weight: 400; color: #666}
.list-period ul li .body-box .img { flex-shrink: 0; width: 70px; height: 70px; border-radius: 10px; overflow: hidden; margin-left: 20px}
.list-period ul li .body-box .img img { display: block; width: 100%; height: 100%; object-fit: cover}

.list-period ul li .body-box .thumb-img { width: 60px; height: 60px; margin-left: 20px}

.list-period ul li .body-box .text-small { flex: 1}
.list-period ul li .body-box .text-small p { font-size: 14px; color: #666; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; overflow: hidden}

.list-period ul li .body-box .file-box { display: flex; flex-wrap: wrap; gap: 6px 15px; margin-top: 10px}
.list-period ul li .body-box .file-box em { white-space: nowrap}
.list-period ul li .body-box .file-add-num { width: 100%}

.file-add-num { display: block; font-size: 14px; color: #333; padding-left: 18px; background: url("/assets/img/app/ico_clip.svg") 0 center no-repeat}
.sms-info { display: block; font-size: 13px; color: #333; padding-left: 20px; background: url("/assets/img/app/ico_mail.svg") 0 center no-repeat; white-space: nowrap;}

.list-period.plan ul li .header-box { margin-bottom: 10px}

.list-period ul li.no-read { background: #fcf8e3}
.list-period ul li.no-read .date { background: #fff}

/* Member info */
.member-info { display: flex; align-items: center; margin-bottom: 15px}
.member-info .img-con { position: relative; flex-shrink: 0; width: 70px; height: 70px; margin-right: 10px}
.member-info .img { width: 100%; height: 100%; border-radius: 50%; background: #fff; overflow: hidden; border: 1px solid #e9e9e9;}
.member-info .img img { display: block; width: 100%; height: 100%; object-fit: cover}
.member-info .img.img-cover img { object-fit: cover}
.member-info .img.img-contain img { object-fit: contain}
.member-info .btn-edit { position: absolute; right: -5px; bottom: 0; width: 20px; height: 20px}
.member-info .btn-edit::after { width: 10px; height: 10px}
.member-info .text { position: relative; flex: 1;}
.member-info .text strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.2; margin-top: 2px}
.member-info .text span { display: block; font-size: 12px; color: #777; font-weight: 500; letter-spacing: 0; margin-top: 2px}

.member-info.round { align-items: stretch}
.member-info.round .img-con { width: 60px; height: 60px; margin-right: 0}
.member-info.round .text { display: flex; flex-direction: column; justify-content: center; height: 60px; background: #eff5ef; border-radius: 30px; padding: 0 0 0 30px}
.member-info.round .text a { position: relative; display: block; width: 100%}
.member-info.round .text a::after { content: ""; position: absolute; right: 20px; top: 50%; width: 14px; height: 14px; background: url("/assets/img/app/ico_menu_arr.svg") center center /cover no-repeat; transform: translateY(-50%)}

/* Price dl */
.price-dl { background: #fff; padding: 15px; border-radius: 10px;}
.price-dl dl { display: flex; align-items: flex-start; justify-content: space-between}
.price-dl dl.ai-center { align-items: center}
.price-dl dt { width: 100px;  font-size: 14px; color: #666}
.price-dl dd { flex: 1; font-size: 14px; color: #000; font-weight: 500; text-align: right}
.price-dl dl + dl { margin-top: 12px}
.price-dl dl.total dt { color: #000; font-weight: 600}
.price-dl dl.total dd { color: #000; font-weight: 600}

.price-dl dl.line { border-top: 1px dashed #ddd; padding-top: 15px; margin-top: 15px}

/* title */
h4.list-title { font-size: 18px; font-weight: 700; margin-bottom: 20px}
h4.list-title + p { font-size: 13px; color: #666; margin-top: -15px; margin-bottom: 20px}
h4.top-line { position: relative; font-size: 18px; font-weight: 700; padding-top: 38px; margin-bottom: 20px}
h4.top-line::before { content: ""; position: absolute; top: 0; left: -20px; right: -20px; height: 8px; background: #eee}

h5.list-title { font-size: 16px; font-weight: 700; margin-bottom: 15px}

p.small { font-size: 13px}

/*========================
Mypage
========================*/
/* my child list */
.my-child-list ul li { position: relative; border-top: 1px solid #eee; padding: 20px 0}
.my-child-list ul li:first-child { border-top: 0; padding-top: 10px}
.my-child-list ul li .member-info { margin-bottom: 10px}
.my-child-list ul li .btn-line { margin-left: 60px}
.my-child-list ul li .btn-line > * + * { margin-left: 5px}
.my-child-list ul li .btn-line .btnn { width: 80px; height: 30px; font-size: 13px; border-radius: 15px}
/*.my-child-list ul li a.link-memory { flex-shrink: 0; display: flex; align-items: center; height: 30px; font-size: 12px; font-weight: 500; border-radius: 30px; border: 1px solid #aaa; background: url("/assets/img/app/ico_memory.svg") 8px center /14px no-repeat; padding: 0 10px 0 26px;}*/
.link-memory { flex-shrink: 0; display: flex; align-items: center; height: 30px; font-size: 12px; color: #333; font-weight: 500; border-radius: 30px; border: 1px solid #539B5C; background: url("/assets/img/app/ico_memory.svg") 8px center /14px no-repeat; padding: 0 10px 0 26px;}

@media (max-width: 349px){
	.my-child-list ul li .btn-line { margin-left: 0px}
}

/* note */
.member-note { border-radius: 20px; background: #f5f5f5; padding: 12px 20px 15px 20px; margin-bottom: 20px}
.member-note strong { display: block; font-size: 14px; font-weight: 500; letter-spacing: 0; margin-bottom: 4px}
.member-note p { font-size: 12px; line-height: 1.3; letter-spacing: 0}

/* marketing */
.agree-marketing { padding-top: 10px}
.agree-marketing .form-item { margin-bottom: 10px}
.agree-marketing input.checkradio + label > span { font-size: 14px; font-weight: 500}
.agree-marketing p { font-size: 12px; letter-spacing: 0}


/*========================
Memory
========================*/
/*
.memory-con .member-info { background: #fff; border-radius: 0 0 30px 30px; padding: 10px 20px 20px 20px; margin-bottom: 20px}
*/

.memory-con .member-info { margin-bottom: 0}
.memory-con .member-info .text strong { font-size: 15px}

.memory-item { padding: 20px 0}
.memory-item ul { display: flex; gap: 0 20px}
.memory-item ul li { flex: 1}
.memory-item ul li a { display: flex; flex-direction: column; background: #fff; border-radius: 30px}
.memory-item ul li .img { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: #fff; border-radius: 50%; margin: 10px}
.memory-item ul li .img img { display: block; width: 26px}
.memory-item ul li p { align-self: flex-end; text-align: right; margin: 0 20px 20px 0}
.memory-item ul li p strong { display: block}
.memory-item ul li p em { display: block; font-size: 18px; font-weight: 600}
/*.memory-item ul li:first-of-type a,
.memory-item ul li:last-of-type .img { background: #DBCAFF}*/
.memory-item ul li:first-of-type p { color: #fff}
.memory-item ul li:first-of-type a,
.memory-item ul li:last-of-type .img { background: #539B5C}

.memory-item .info-box { margin-top: 20px}
.info-box p.icon { font-size: 13px; color: #666; background: url("/assets/img/app/ico_info.svg") 0 3px no-repeat; padding-left: 18px}


/*========================
Schedule
========================*/
/*.sorting-con { border-bottom: 1px solid #ddd; padding: 15px 0; margin-bottom: 20px}*/
.top-bg-round { background: #fff; border-radius: 0 0 30px 30px; padding: 0px 0 15px 0}
.top-bg-round .select-area { display: flex; align-items: center; gap: 10px}

.sorting-con ul { display: flex; align-items: center; justify-content: center; gap: 0 5px}
.sorting-con ul li.on .btnn.btnn-80 { color: #fff; background: #3E4685; border-color: #3E4685;}

.schedule-list { padding: 20px 0}


/*========================
Attendance
========================*/
.attendance-con .top-info { background: #F3F5F6}
.attendance-con .top-info .conbox { display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 0 0 30px 30px; padding-bottom: 15px}
.attendance-con .top-info .member-info { flex: 1; margin: 0 30px 0 0}
.attendance-con .top-info .member-info .text strong { font-size: 15px}
.attendance-con .top-info .att-days { display: flex; align-items: center; font-size: 15px; font-weight: 500}
.attendance-con .top-info .att-days span { display: block; font-size: 20px; color: #567CFC; font-weight: 500; letter-spacing: 0; margin: 0 2px 0 10px}

.att-info { margin: 10px 0 0 20px}
.att-info ul { display: flex;}
.att-info ul li { display: flex; align-items: center; font-size: 13px}
.att-info ul li + li { margin-left: 15px}
.att-info ul li em { display: block; width: 12px; height: 12px; background: #fff; border-radius: 3px; margin-right: 5px}
.att-info ul li em.blue { background: #97B9FF !important}
.att-info ul li em.red { background: #FF9797 !important}
.att-info ul li span { display: block; margin-top: 1px}

.attendance-con p.notice { font-size: 13px; margin: 5px 0 0 20px}

/* calendar */
.att-calendar .inner { background: #F3F5F6; padding: 20px 0}
.nav-calendar { display: flex; justify-content: center; align-items: center; margin-bottom: 20px}
.nav-calendar .btn-arr-prev,
.nav-calendar .btn-arr-next { display: block; width: 24px; height: 24px; background: url("/assets/img/app/btn_cal_arr.svg") center no-repeat}
.nav-calendar .btn-arr-prev { transform: scaleX(-1)}
.nav-calendar .month { display: block; font-size: 20px; font-weight: 600; letter-spacing: 0; margin: 0 30px}

.tbl-calendar { max-width: 500px; margin: 0 auto}
.tbl-calendar thead, .tbl-calendar tbody { display: block; margin: 0 5px}
.tbl-calendar tr { display: flex; border-bottom: 0}
.tbl-calendar th, .tbl-calendar td { flex: 1; display: block}

.tbl-calendar th { font-size: 12px; font-weight: 500; text-align: center; padding-bottom: 10px}
.tbl-calendar th.sun { color: #D00D0D}
.tbl-calendar th.sat { color: #0840F6}

.tbl-calendar tbody { border-top: 1px solid rgba(0,0,0,0.12); padding-top: 10px}
.tbl-calendar td .date { display: block; height: 58px; background: #fff; border-radius: 20px; text-transform: none; margin: 1px}
.tbl-calendar td .day { display: block; font-size: 14px; color: #111; font-weight: 500; letter-spacing: 0; text-align: center; padding-top: 8px}
.tbl-calendar td p { position: relative; font-size: 12px; font-weight: 500; text-align: center;}

.tbl-calendar td.today .date { background: #fbb427}
.tbl-calendar td.today .day { color: #fff}
.tbl-calendar td.today p { font-size: 11px; color: #fff; letter-spacing: 0}
.tbl-calendar td.another .day { color: #bbb}
.tbl-calendar td.att-ok .date { background: #97B9FF}
.tbl-calendar td.att-no .date { background: #FF9797}
.tbl-calendar td.att-ok p { height: 16px; background: url("/assets/img/app/att_ok.svg") center no-repeat}
.tbl-calendar td.att-no p { height: 16px; background: url("/assets/img/app/att_no.svg") center no-repeat}

.tbl-calendar td p span { position: absolute; display: block; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}

@media (min-width: 576px) {
	.tbl-calendar td .date { margin: 5px}
}


/*========================
Report
========================*/
.report-header .conbox { display: flex; align-items: center; justify-content: space-between;}
.report-header h1 { font-size: 0}
.report-header h1 img { max-width: 120px}
.report-header .info p { font-size: 13px; font-weight: 500; text-align: right}
.report-header .info .tel { color: #d1112a}

/*.report-header { }
.report-header h1 { display: flex; justify-content: center; font-size: 0; margin-bottom: 15px}
.report-header h1 img { display: block; height: 34px; object-fit: contain}
.report-header .info { display: flex; align-items: center; justify-content: space-between}
.report-header .info p { font-size: 14px; font-weight: 500; text-align: right}
.report-header .info .tel { color: #d1112a}*/

.report-body { margin-top: 20px}

.report-item + .report-item { margin-top: 20px}
.report-tit { display: flex; align-items: center; justify-content: center; height: 30px; font-size: 14px; color: #fff; font-weight: 500; letter-spacing: 0; background: #3E4685; border-radius: 15px; margin-bottom: 10px}

.report-tbl { border-collapse: separate; border-spacing: 2px;}
.report-1 .col1 { width: 22%}
.report-1 .col2 { width: 22%}
.report-1 .col3 { width: 22%}
.report-1 .col4 { width: 34%}

.report-2 .col1 { width: 40%}
.report-2 .col2 { width: 30%}
.report-2 .col3 { width: 30%}

.report-tbl.fix { table-layout: fixed}
.report-tbl th, .report-tbl td { text-align: center; border: 1px solid #ccc; padding: 8px 2px}
.report-tbl th { font-size: 13px; font-weight: 600; background: #eee;}
.report-tbl td { font-size: 14px;}

.report-item .text-area { border: 1px solid #ccc; padding: 15px}
.report-item .text-area p { font-size: 14px}

.report-footer { background: #eee; border: 1px solid #ddd; padding: 10px 0; margin: 20px}
.report-footer p { font-size: 14px; text-align: center;}

/* chart */
.report-bar { height: 220px}
.report-raider { height: 220px}

@media (max-width: 575px){
	.report-bar { height: 200px}
	.report-raider { height: 200px}
}


/*========================
Alim
========================*/
/*
.month-choice p { position: relative; display: flex; justify-content: center}
.month-choice span { position: relative; display: block; font-size: 15px; padding-right: 22px}
.month-choice span::after { content: ""; position: absolute; right: 0; top: 50%; width: 12px; height: 12px; background: url(/assets/img/app/ico_menu_arr.svg) center center /cover no-repeat; transform: translateY(-50%) rotate(90deg);}

.month-choice .select-area { position: relative}
.month-choice .select-area::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 11px; background: url(/assets/img/app/ico_arr_right.svg) center center /cover no-repeat; transform: translate(-50%, -50%) rotate(90deg); margin-left: 30px}
*/

.month-choice select { height: 46px !important; color: #000; text-align: center}
.month-choice select:focus { outline: none}

.alim-list { padding: 20px 0}
.alim-con .list-period ul li a { min-height: 140px}


/*========================
Alim Write
========================*/
.alim-write-con { }
.std-select .img-area { width: 40px; height: 40px; border-radius: 50%; overflow: hidden}
.std-select .img-area img { display: block; width: 100%; height: 100%; object-fit: cover}
.std-select .btn-student { font-size: 15px; font-weight: 600}
.std-select .btn-student span { position: relative; display: block; background: url("/assets/img/app/ico_std_select_arr.svg") right center no-repeat; padding-right: 16px}

.write-box-alim textarea.form-basic.outline { height: 35vh !important}

.upload-area { position: relative; padding-top: 25px; margin-top: 25px}
.upload-area::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: #999}
.upload-area .tit-area { display: flex; align-items: center; margin-bottom: 15px}
.upload-area h4 { font-size: 15px; font-weight: 600; letter-spacing: 0}
.upload-area .tit-area .text-num { display: flex; align-items: center; font-family: 'Noto Sans KR', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0; margin-left: 10px; margin-top: -2px}

.data-in ul li { position: relative}
/*.data-in ul li .data-del { position: absolute; right: 0; top: 0; width: 28px; height: 28px; background: url("/assets/img/app/ico_data_del.svg") center no-repeat; text-indent: -9999px}
.data-in ul li .data-down { position: absolute; right: 0; top: 0; width: 28px; height: 28px; background: url("/assets/img/app/ico_down_solo_dark.svg") center /10px no-repeat; text-indent: -9999px}*/

.data-in .data-del, 
.data-in .data-down { position: absolute; top: 50%; right: 5px; width: 28px; height: 28px; background: center no-repeat; text-indent: -9999px; transform: translateY(-50%)}
.data-in .data-del { background-image: url("/assets/img/app/ico_data_del.svg")}
.data-in .data-down { background-image: url("/assets/img/app/ico_down_solo_dark.svg"); background-size: 10px}

.photo-area .data-in ul li { width: 70px}
.photo-area .data-in ul li .btn-img-choice { height: 70px}
.photo-area .data-in ul li .img { position: relative; width: 100%; height: 70px; border: 1px solid #ddd; border-radius: 10px; overflow: hidden}
.photo-area .data-in ul li .img img { display: block; width: 100%; height: 100%; object-fit: cover}
.photo-area .data-in .data-del { top: 0; right: 0; transform: translateY(0)}

.file-area .data-in ul li + li { margin-top: 10px}
/*.file-area .data-in ul li .file-name { position: relative; display: flex; align-items: center; height: 50px; border: 1px solid #ddd; background: #fff; border-radius: 4px; padding: 0 40px 0 15px}
.file-area .data-in ul li .file-name input[type=text] { border: 0; height: 100%; margin: 0; box-sizing: border-box}
.file-area .data-in ul li .file-name .title-in { flex: 1; font-size: 14px; color: #111; background: url("/assets/img/app/ico_file.svg") 0 center no-repeat; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-left: 25px;}
.file-area .data-in ul li .data-del,
.file-area .data-in ul li .data-down { top: 50%; right: 5px; transform: translateY(-50%)}*/

.data-in .file-name { position: relative; display: flex; align-items: center; height: 50px; border: 1px solid #ddd; background: #fff; border-radius: 4px; padding: 0 40px 0 15px}
.data-in .file-name input[type=text] { border: 0; height: 100%; margin: 0; box-sizing: border-box}
.data-in .file-name .title-in { flex: 1; font-size: 14px; color: #111; background: url("/assets/img/app/ico_file.svg") 0 center no-repeat; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-left: 25px;}

.send-pick { position: relative; padding-top: 25px; margin-top: 25px}
.send-pick::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: #999}
.send-pick .tit { font-size: 15px; font-weight: 600; letter-spacing: 0; margin-bottom: 10px}
.send-pick input.checkradio + label > span { font-weight: 500}

/* modal */
.student-in-md .btn-line.lr .btnn.btnn-sm { height: 34px}
.student-in-md .all-area { background: #f5f5f5; padding: 15px 0; margin: 15px 0 5px 0}
.student-in-md .all-area p { font-size: 13px; margin-left: auto}
.student-in-md .all-area input.checkradio + label > span { font-size: 14px; font-weight: 500}

/*.student-in-md .group-area + .group-area { border-top: 1px solid #ddd; padding-top: 25px; margin-top: 30px}*/

.student-in-md .group-area > .conbox > ul > li { border-bottom: 1px solid #ddd}
.student-in-md .show-box { display: flex; align-items: center; justify-content: space-between; font-size: 16px; line-height: 1.5; padding: 9px 0 11px;}
.student-in-md .show-box .form-item { margin-right: 10px}
.student-in-md .show-box input.checkradio + label { font-size: 15px; font-weight: 600; white-space: nowrap}
.student-in-md .show-box .right-in { display: flex; align-items: center}
.student-in-md .show-box .right-in p { font-size: 13px; color: #999; margin-right: 5px}
.btn-open-toggle { position: relative; display: block; width: 30px; height: 30px;}
.btn-open-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); background: url("/assets/img/app/ico_std_select2_arr.svg") center no-repeat; transition: 0.3s}
.student-in-md .group-area ul li.open .btn-open-toggle::after { transform: translate(-50%, -50%) rotate(180deg)}

.student-in-md .hide-box { display: none}
/*.student-in-md .hide-box ul { background: #eff5ef; padding: 15px}*/
.student-in-md .hide-box ul { background: #f4f9f5; padding: 15px}
.student-in-md .hide-box ul li { position: relative;}
.student-in-md .hide-box ul li .form-flex { min-height: 30px}
.student-in-md .hide-box ul li input.checkradio + label > span { padding-left: 45px}
.student-in-md .hide-box ul li + li { margin-top: 12px}
.student-in-md .hide-box ul li .img-area { position: absolute; left: 30px; top: 50%; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; transform: translateY(-50%)}
.student-in-md .hide-box ul li .img-area img { display: block; width: 100%; height: 100%; object-fit: cover}
.student-in-md .hide-box ul li input.checkradio + label { font-size: 14px; font-weight: 500}


/*========================
Alim View
========================*/
.alim-view-con .member-info { margin-bottom: 15px}
.alim-view-con .member-info .img-con { width: 40px; height: 40px}
.alim-view-con .member-info .text strong { font-size: 14px; font-weight: 500}

.alim-view-con .view-box { padding-bottom: 30px}
.alim-view-con .data-in .no-data { padding: 5px 0 !important}

.dwload-area { position: relative; padding-top: 30px; margin-top: 30px}
.dwload-area::before { content: ""; position: absolute; top: -4px; left: 0; right: 0; height: 8px; background: #eee}
.dwload-area .tit-area { display: flex; align-items: center; margin-bottom: 15px}
.dwload-area h4 { font-size: 15px; font-weight: 600; letter-spacing: 0}
.dwload-area .tit-area .text-num { display: flex; align-items: center; font-family: 'Noto Sans KR', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0; margin-left: 10px; margin-top: -2px}
.dwload-area .data-in ul li .file-name + figure.img,
.dwload-area .data-in ul li .file-name + figure.media{ margin-top: 15px}
.dwload-area .data-in ul li + li { border-top: 1px dashed #ddd; padding-top: 25px; margin-top: 25px}


/*========================
Alim Image View
========================*/
.alim-img-con .slide-con { position: relative; display: flex; flex-direction: column; padding: 10px 0 50px 0}
/*.alim-img-con .slide-con .btnn-down2 { position: absolute; right: 0; top: 0}*/
.alim-img-con .btn-line { padding-top: 15px;}

.swiper.slide-alim { width: 100%; height: 65vh}
.slide-alim ul { }
/*.slide-alim li { display: flex; flex-direction: column; height: 40vh; border-radius: 10px; overflow: hidden}*/
.slide-alim li { display: flex; align-items: center; justify-content: center}
.slide-alim li .img { width: 100%; height: 100%; background: #fff; padding: 10px 0}
.slide-alim li .img img { display: block; width: 100%; height: 100%; object-fit: contain}

.swiper-pagination.alim { bottom: 0; top: auto; display: flex; align-items: center; justify-content: center; height: 36px; font-size: 12px; color: #000; font-weight: 400; letter-spacing: 0; text-align: left}
.swiper-pagination.alim span { font-size: 16px; margin: 0 2px}
.swiper-button-prev.alim,
.swiper-button-next.alim { bottom: 0; top: auto; width: 36px; height: 36px; color: #fff; background: rgba(0, 0, 0, 0.6); border-radius: 50%; margin-top: 0}
.swiper-button-prev.alim { left: 0}
.swiper-button-next.alim { right: 0}
.swiper-button-prev.alim::after,
.swiper-button-next.alim::after { font-size: 16px; font-weight: 600}


/*========================
Album
========================*/
.album-list { padding: 20px 0}

.list-gallery + .month-line { margin-top: 20px}
.list-gallery + .month-line.nobar { padding-top: 25px; margin-top: 30px;}
.list-gallery + .month-line.nobar::after { content: ""; position: absolute; top: 0; left: -20px; right: -20px; height: 1px; background: #ddd}

.list-gallery > ul > li { background: #fff; border-radius: 20px; padding: 15px 15px 20px 15px; margin-top: 12px;}
/*.list-gallery > ul > li + li { padding-top: 20px; border-top: 1px solid #eee; margin-top: 20px}*/
.list-gallery li.no-read { background: #fcf8e3}
.list-gallery li a { display: block}
.list-gallery li .text { margin-bottom: 20px}
.list-gallery li .text .subject { font-size: 16px; color: #000; font-weight: 600;}
.list-gallery li .text p { font-size: 13px; color: #666}
.list-gallery .slide-img ul li { width: 70px}
.list-gallery .slide-img .thumb-img img { border: 1px solid #eee}

.go-memory { padding-top: 20px}
.album-con .info-box { display: flex; flex-direction: column; align-items: center}
.album-con .info-box p.icon { line-height: 1.3; margin-bottom: 10px}
.album-con .info-box .btnn { position: relative; }
.album-con .info-box .btnn span { display: block; background: url("/assets/img/app/ico_menu_arr.svg") right center /10px no-repeat; padding-right: 15px}


/*========================
Album View
========================*/
.album-view-con .member-info { padding: 20px 0; margin-bottom: 0}
.album-view-con .member-info .img-con { width: 40px; height: 40px}
.album-view-con .member-info .text strong { font-size: 14px; font-weight: 500}


/*========================
Album Image View
========================*/
.album-img-con .slide-con { position: relative; display: flex; flex-direction: column; padding: 10px 0 50px 0}
/*.album-img-con .slide-con .btnn-down2 { position: absolute; right: 0; top: 0}*/
.album-img-con .btn-line { padding-top: 15px;}

.swiper.slide-album { width: 100%; height: 65vh}
.slide-album ul { }
/*.slide-album li { display: flex; flex-direction: column; height: 40vh; border-radius: 10px; overflow: hidden}*/
.slide-album li { display: flex; align-items: center; justify-content: center}
.slide-album li .img { width: 100%; height: 100%; background: #fff; padding: 10px 0}
.slide-album li .img img { display: block; width: 100%; height: 100%; object-fit: contain}

.swiper-pagination.album { bottom: 0; top: auto; display: flex; align-items: center; justify-content: center; height: 36px; font-size: 12px; color: #000; font-weight: 400; letter-spacing: 0; text-align: left}
.swiper-pagination.album span { font-size: 16px; margin: 0 2px}
.swiper-button-prev.album,
.swiper-button-next.album { bottom: 0; top: auto; width: 36px; height: 36px; color: #fff; background: rgba(0, 0, 0, 0.6); border-radius: 50%; margin-top: 0}
.swiper-button-prev.album { left: 0}
.swiper-button-next.album { right: 0}
.swiper-button-prev.album::after,
.swiper-button-next.album::after { font-size: 16px; font-weight: 600}


/*========================
Medicine
========================*/
/*.medicine-con .top-area { padding: 20px 0; border-bottom: 1px solid #ddd}*/
.medicine-list { padding: 25px 0}

.list-day > ul > li + li { border-top: 1px dashed #ccc; padding-top: 20px; margin-top: 20px;}

.list-day .day-info { font-size: 14px; font-weight: 500; margin: 0 15px 10px 15px}
.list-day .day-info span { display: block}
.list-day .member-info { background: #fff; border-radius: 20px; margin-bottom: 0}
.list-day .member-info + .member-info { margin-top: 10px}
.list-day .member-info a { display: flex; align-items: center; width: 100%; padding: 15px; }
.list-day .member-info .text strong { font-size: 15px}
.list-day .tag-tit { display: block; font-size: 12px; font-weight: 500; text-align: center; border-radius: 4px; padding: 3px 8px}
.list-day .tag-tit.tag-gray { color: #666; background: #f3f5f6}
.list-day .tag-tit.tag-outline-blue { color: #5396E3; background: #fff; border: 1px solid #5396E3;}
.list-day .tag-tit.tag-outline-orange { color: #eb9825; background: #fff; border: 1px solid #fbb34f;}
/*.list-day .tag-tit.tag-blue { color: #567CFC; background: #E7F4FC}*/
.list-day .member-info .right-con { display: flex; flex-direction: column; align-items: flex-end; margin-left: 15px}
.list-day .member-info .right-con .time { display: block; font-size: 13px; color: #666; letter-spacing: 0; margin-bottom: 2px}

.list-day li.no-read .member-info { background: #fcf8e3}


/*========================
Medicine Write
========================*/
.medicine-write-con .member-info .img-con { width: 40px; height: 40px}
.medicine-write-con .member-info .text strong { font-size: 14px; font-weight: 500}

.medicine-write-con .form-group { padding-top: 25px}
.medicine-write-con .form-group + .form-group { padding-top: 30px}
.medicine-write-con .form-group + .form-group .btn-medicine-del { top: 15px}

.sign-box .text-con { line-height: 1.7; text-align: center; margin-bottom: 20px}
.sign-box .text-con p { font-size: 15px; color: #000;}
.sign-box .text-con strong { display: block; font-size: 15px; color: #000; letter-spacing: 0}

.sign-box .img-con { display: flex; justify-content: flex-end}
.sign-box .img-con .img { width: 120px; height: 60px;}
.sign-box .img-con .img img { width: 100%; height: 100%; object-fit: contain}

.sign-link { display: flex; justify-content: center; align-items: center; height: 50px; font-size: 14px; border: 1px solid #ddd; border-radius: 4px}
.sign-link span { display: block}
.sign-link i { font-size: 18px}

.sign-img-con.on { padding: 5px 0 0 0}
.sign-img-con.on .conbox { display: flex; justify-content: center}
.sign-img-con.on .img { width: 120px; height: 60px}
.sign-img-con.on .img img { display: block; width: 100%; height: 100%; object-fit: contain}

@media (max-width: 575px){
	.sign-box .img-con .img { width: 100px; height: 50px;}
}

/* modal */
.m-type-md .form-item + .form-item { margin-top: 10px}
.m-type-md .form-item + .btn-line { margin-top: 25px}


/*========================
Medicine View
========================*/
.medicine-view-con .member-info .img-con { width: 40px; height: 40px}
.medicine-view-con .member-info .text strong { font-size: 14px; font-weight: 500}
.medicine-view-con .view-box .name p { height: 40px; font-size: 13px; color: #666; font-weight: 400}

.medicine-view-con { font-size: 14px}
.medicine-view-con .mv-info { padding-top: 30px}
.medicine-view-con .mv-info dl + dl { margin-top: 20px}
.medicine-view-con .mv-info dt { color: #000; font-weight: 500}
.medicine-view-con .mv-info dd { word-break: break-all; margin-top: 5px}

.medicine-view-con .mv-detail .inner + .inner { border-top: 1px solid #ddd; padding-top: 25px; margin-top: 20px}
.medicine-view-con .mv-detail dl { display: flex}
.medicine-view-con .mv-detail dl + dl { margin-top: 10px}
.medicine-view-con .mv-detail dt { width: 80px; color: #000; font-weight: 500}
.medicine-view-con .mv-detail dd { flex: 1; word-break: break-all}

.medicine-view-con .sign-box { padding-bottom: 30px}
.medicine-view-con .sign-box .conbox { display: flex; justify-content: space-between}
.medicine-view-con .sign-box .text-con { text-align: left; margin-bottom: 0}
.medicine-view-con .sign-box .text-con p { font-size: 14px; color: #666;}
.medicine-view-con .sign-box .text-con strong { font-size: 14px}

.m-report-box { background: #F3F5F6; padding: 30px 0}
.m-report-box .notice-note p, .m-report-box .notice-note strong { color: #000; letter-spacing: 0;}
.m-report-box .notice-note p { margin-bottom: 10px}
.m-report-box .special-note { position: relative; border-top: 1px solid #ccc; padding-top: 30px; margin-top: 25px;}
.m-report-box .special-note .btnn { position: absolute; right: 0; top: 20px; background: transparent}
.m-report-box .special-note p { font-size: 14px; background: #fff; padding: 15px}

@media (max-width: 360px){
	.medicine-view-con .sign-box .conbox { flex-direction: column; justify-content: flex-start}
}


/*========================
Medicine Report Write
========================*/
.medicine-report-write-con .write-box { padding: 30px 0}
.medicine-report-write-con .write-box textarea.form-basic { height: 50vh !important}


/*========================
Medicine Sign
========================*/
.sign-form { padding: 20px 0}
.sign-form .canvas { width: 100%; height: 50vh; background: #f4f4f4}
.sign-form .btn-erase { margin-top: 10px}

 
/*========================
Gohome
========================*/
.gohome-list { padding: 25px 0}


/*========================
Gohome View
========================*/
.gohome-detail { padding: 20px 0}
.gohome-detail .form-flex .form-item { flex: 1}
.gohome-detail .form-flex .form-item + .form-item { margin-top: 0}

p.outline { display: flex; align-items: center; height: 50px; font-size: 16px; font-weight: 500; border: 1px solid #ddd; border-radius: 4px; padding: 0 15px}
.tel-box { display: flex; align-items: center; gap: 0 10px; height: 50px; border-bottom: 1px solid #ddd}
.btn-tel { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 15px; background: url("/assets/img/app/ico_phone.svg") center /12px no-repeat #333;}
.tel-box .num { font-size: 16px; font-weight: 500}

.sign-box2 { padding: 20px 0}
.sign-box2 p.small { color: #333; margin-bottom: 10px}
.sign-box2 p.request { font-size: 14px; color: #111; margin-bottom: 15px}
.sign-box2 p.request-c { font-size: 14px; color: #111; text-align: center; margin-bottom: 5px}
.sign-box2 .date { display: flex; justify-content: center; gap: 0 10px; font-size: 14px; color: #111; letter-spacing: 0; margin-bottom: 20px}
.sign-box2 .img-con { display: flex; justify-content: space-between}
.sign-box2 .img-con strong { display: block; font-size: 14px; font-weight: 600}
.sign-box2 .img-con strong span { display: block}
.sign-box2 .img-con .img { width: 120px; height: 60px;}
.sign-box2 .img-con .img img { width: 100%; height: 100%; object-fit: cover}

@media (max-width: 575px){
	.sign-box2 .img-con .img { width: 100px; height: 50px;}
}


/*========================
Gohome Write
========================*/
.write-box-gohome { padding: 20px 0}
.btn-circle { display: block; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #333; background: center no-repeat; opacity: 0.4}
.btn-circle:focus { background: center no-repeat}
.btn-circle.foot { background-image: url(/assets/img/app/btn_footprint.svg)}
.btn-circle.car { background-image: url("/assets/img/app/btn_car.svg")}
.btn-circle.bus { background-image: url("/assets/img/app/btn_bus.svg")}
.btn-circle.bicycle { background-image: url("/assets/img/app/btn_bicycle.svg")}
.btn-circle.etc { background-image: url("/assets/img/app/btn_dot.svg")}
.btn-circle.on { opacity: 1}

.btn-tel-list em { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 15px; background: url("/assets/img/app/ico_phone_plus.svg") center /14px no-repeat #333;}

.how-home .btn-line { margin-bottom: 10px}

.gohome-write-con .sign-box2 { padding: 20px 0 0 0}

/*.sign-gh-write .conbox { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between}
.sign-gh-write p.fin { font-size: 14px; color: #333; font-weight: 500}
.sign-gh-write .sign-link { display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; font-size: 14px; border: 1px solid #ddd; border-radius: 4px}
.sign-gh-write .sign-link span { display: block}
.sign-gh-write .sign-link i { font-size: 18px}
.sign-gh-write .img-con { font-size: 0}
.sign-gh-write .img-con img { display: block; width: 120px; background: #f5f5f5}*/

/*{ background: url(/assets/img/app/ico_std_select_arr.svg) right 20px center no-repeat #fff}*/

/* Modal : Sign */
.signature-md .sign-form { text-align: center; padding: 0}
.signature-md .sign-form .canvas { position: relative; width: 300px; height: 150px;}
#modal_sign .text-con p { font-size: 14px; color: #000; font-weight: 500; text-align: center; margin: 10px 0}
#modal_sign .text-con p strong { color: #539B5C; font-weight: 600}

@media (max-width: 575px) {
    #modal_sign.modal { width: 90%}
    #modal_sign.modal .modal-content { padding: 20px 5px}
}
@media (max-width: 355px) {
    .signature-md .sign-form .canvas { width: 100%}
}

/* Modal : Phone list */
.modal .search-bar { position: relative; display: flex; align-items: center;}
.modal .search-bar input[type=text] { border-bottom-color: #ccc; padding-right: 30px; margin-bottom: 0}
.btn-del { position: absolute; right: 0; top: 50%; transform: translateY(-50%)}
.btn-del em { display: block; width: 16px; height: 16px; background: url("/assets/img/app/ico_del.svg") center /contain no-repeat;}

.number-list-md .numlist { padding: 25px 0 40px 0}
.number-list-md input.checkradio + label { width: 100%; font-size: 14px; color: #111}
.number-list-md input.checkradio + label > span { display: flex; flex-wrap: wrap; padding-left: 0; margin-top: 0}
.number-list-md input[type=radio].checkradio:checked + label > span { color: #111}
.number-list-md input.checkradio + label em { display: block; font-weight: 500}
.number-list-md input.checkradio + label em.phone { font-weight: 400; margin-left: 5px}
.number-list-md input.checkradio + label::before { order: 3; margin-left: auto}
.number-list-md input[type=radio].checkradio:checked + label::after { left: auto; right: 6px}




/*========================
Point
========================*/
/*
.point-total { }
.point-total dl { display: flex; align-items: center; justify-content: space-between; height: 50px; background: #DBE4F3; border-radius: 25px; padding: 0 20px}
.point-total dt { font-size: 14px; font-weight: 600}
.point-total dd { font-size: 20px; color: #567CFC; font-weight: 600}
.point-total dd em { font-size: 16px;}

.point-list { background: #fff; border-radius: 30px; padding: 30px 20px; margin-top: 15px}
.point-list ul li { display: flex; align-items: center; justify-content: space-between;}
.point-list ul li.no-data { justify-content: center}
.point-list ul li + li { padding-top: 15px; border-top: 1px solid #eee; margin-top: 15px}
.point-list ul li .text { flex: 1; margin-right: 50px}
.point-list ul li .text strong { display: block;  font-size: 15px; font-weight: 500}
.point-list ul li .text span { display: block; font-size: 12px; color: #999; font-weight: 500; letter-spacing: 0;}
*/

.point-total { position: fixed; top: 60px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; height: 130px; max-width: 575px; background: #fff; border-radius: 0 0 30px 30px; margin-left: auto; margin-right: auto}
.point-total dl { display: flex; flex-direction: column; align-items: center; line-height: 1.3}
.point-total dt { font-size: 14px; color: #000; font-weight: 500}
.point-total dd { font-size: 30px; color: #2a62ec; font-weight: 600}
.point-total dd em { font-weight: 400}
.point-total .btn-line { margin-top: 5px}
.point-total .btn-line .btnn span { position: relative; display: block; color: #777; padding-left: 22px}
.point-total .btn-line .btnn span::before { content: ""; position: absolute; left: 0; top: 50%; display: block; width: 18px; height: 18px; background: url("/assets/img/app/ico_history.svg") center /contain no-repeat; transform: translateY(-50%);}

.point-list { padding: 30px 20px; margin-top: 190px}
.point-list .conbox { }
.point-list ul li { display: flex; align-items: center; justify-content: space-between;}
.point-list ul li.no-data { justify-content: center}
.point-list ul li + li { padding-top: 15px; border-top: 1px solid #ddd; margin-top: 15px}
.point-list ul li .text { flex: 1; margin-right: 50px}
.point-list ul li .text strong { display: block;  font-size: 15px; font-weight: 500}
.point-list ul li .text span { display: block; font-size: 12px; color: #999; font-weight: 500; letter-spacing: 0;}

.point-list ul li .num { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end;}
.point-list ul li .num em { display: block; font-size: 18px; font-weight: 600}
.point-list ul li .num span { display: block; font-size: 12px; color: #999; font-weight: 500}


/*========================
Meal
========================*/
.meal-con p.name { font-size: 14px; color: #666; font-weight: 500; text-align: center}
.meal-con p.name span { position: relative; display: inline-block; padding-left: 36px}
.meal-con p.name span::before { content: ""; position: absolute; left: 0; top: 50%; width: 32px; height: 32px; background: url("/assets/img/app/ico_menu.svg") 0 center /contain no-repeat; transform: translateY(-50%); margin-top: -3px}
.meal-con p.name strong { font-weight: 700; margin-left: 2px}

/* meal list */
.meal-list { padding-bottom: 20px}
/*.meal-list > ul > li { margin-top: 30px}*/
.meal-list > ul > li { position: relative}
.meal-list > ul > li:first-child { margin-top: 25px}
.meal-list > ul > li + li { padding-top: 30px; margin-top: 30px}
.meal-list > ul > li + li::after { content: ""; position: absolute; left: -10px; right: -10px; top: 0; height: 1px; background: #ddd}
.meal-list ul li .meal-header { display: flex; justify-content: space-between; align-items: center}
.meal-list ul li .meal-header .meal-modify { background: transparent}
.meal-list ul li .meal-header .btnn.btnn-auto { padding: 0 10px}

.meal-list ul li .month-line span { font-size: 15px; color: #111}
/*.meal-list ul li .meal-body { position: relative; background: #fff; border: 1px solid #e9e9e9; border-radius: 20px; padding: 10px 10px 20px 10px; margin-top: 10px}*/
.meal-list ul li .meal-body { position: relative; background: #fff; border-radius: 20px; padding: 10px 10px 20px 10px; margin-top: 10px}

/* image */
.meal-img ul { display: flex; justify-content: space-between; gap: 0 8px}
/*.meal-img ul li { width: calc(100%/3); background: #F9E2CA; border-radius: 10px; padding: 5px}
.meal-img ul li:nth-child(2) { background: #f9d7cf}
.meal-img ul li:nth-child(3) { background: #C8EDDF}*/
.meal-img ul li { width: calc(100%/3); background: #eaf4eb; border-radius: 10px; padding: 5px}
.meal-img ul li .img { width: 100%; height: 90px; border-radius: 10px; overflow: hidden}
.meal-img ul li .img img { display: block; width: 100%; height: 100%; object-fit: cover}
.meal-img ul li .text { display: flex; align-items: center; justify-content: space-between; padding: 10px 5px 5px 5px}
.meal-img ul li .text span { display: block; font-size: 12px; font-weight: 600; margin-top: -1px}
/*.meal-img ul li:first-child .text span { color: #c57f00}
.meal-img ul li:nth-child(2) .text span { color: #b86857}
.meal-img ul li:nth-child(3) .text span { color: #348d6c}*/
.meal-img ul li .text span { color: #458f4f}

/* text */
.meal-text { padding: 0 10px; margin-top: 20px}
.meal-text dl { display: flex;}
.meal-text dl + dl { border-top: 1px dashed #e9e9e9; padding-top: 10px; margin-top: 10px}
.meal-text dt { flex-shrink: 0; width: 80px; font-size: 13px; color: #539B5C; font-weight: 700}
.meal-text dd { flex: 1; font-size: 15px; color: #333; font-weight: 500; letter-spacing: 0}
/*.meal-text dl:nth-of-type(2) dt { color: #b86857}
.meal-text dl:nth-of-type(3) dt { color: #348d6c}*/

/* btn write */
.btn-write { display: flex; width: 50px; height: 50px; background: url("/assets/img/app/ico_pen3.svg") center no-repeat #fff; border: 1px solid #539B5C; border-radius: 50%; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15)}
.btn-write span { display: block; text-indent: -9999px}

/*.btn-pos-rb { position: fixed; right: 10px; bottom: 75px}*/
.btn-pos-rb { position: fixed; left: 10px; right: 10px; bottom: 75px; max-width: 555px; display: flex; justify-content: flex-end; margin-left: auto; margin-right: auto; z-index: 10;}


/*========================
Meal View
========================*/
.meal-view-con { padding-top: 20px}
.meal-view-con .back-bg { padding-top: 25px; padding-bottom: 30px}
.meal-view-con .slide-con { position: relative; padding: 15px 0 50px 0}

.slide-meal ul { align-items: center}
.slide-meal li { display: flex; flex-direction: column; height: 40vh; border-radius: 20px; border: 1px solid #ddd; overflow: hidden}
.slide-meal li .img { height: calc(100% - 50px)}
.slide-meal li .img img { display: block; width: 100%; height: 100%; object-fit: cover}
.slide-meal li p { display: flex; align-items: center; justify-content: center; height: 50px; font-size: 14px; color: #333; font-weight: 500; background: #fff;}

/*.slide-meal li:first-child p { color: #c57f00}
.slide-meal li:nth-child(2) p { color: #b86857}
.slide-meal li:nth-child(3) p { color: #348d6c}*/

.swiper-pagination.meal { bottom: 4px; top: auto; font-size: 12px; color: #000; font-weight: 400}
.swiper-pagination.meal span { font-size: 14px;}
.swiper-button-prev.meal,
.swiper-button-next.meal { bottom: 0px; top: auto; width: 30px; height: 30px; margin-top: 0}
.swiper-button-prev.meal { left: -10px}
.swiper-button-next.meal { right: -10px}
.swiper-button-prev.meal::after,
.swiper-button-next.meal::after { font-size: 16px; font-weight: 600}

.meal-view-con .btn-line { margin-top: 20px}


/*========================
Meal write
========================*/
.date-choice .conbox { display: flex; align-items: center; justify-content: space-between; height: 60px; border-bottom: 1px solid #ddd; margin-bottom: 20px}

/* date title */
.date-choice .tit { position: relative; display: flex; align-items: center; font-size: 16px; padding-left: 26px; margin-top: 6px; margin-right: 20px;}
.date-choice .tit::before { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 20px; transform: translateY(-50%); background: url("/assets/img/app/ico_cal2.svg") 0 center no-repeat; margin-top: -2px}
.date-choice .tit .date-pick { display: block; white-space: nowrap; font-weight: 600}
.date-choice .tit .today { display: inline-block; font-size: 12px; color: #539B5C; font-weight: 500; border: 1px solid #539B5C; border-radius: 4px; white-space: nowrap; padding: 1px 5px; margin-top: -4px; margin-left: 8px}
.date-choice .btn-cal-open { display: block; width: 30px; height: 30px; background: url("/assets/img/app/ico_pen2_w.svg") center /18px no-repeat #539B5C; border-radius: 4px;}

/* item */
.write-box-meal .item-con + .item-con { margin-top: 30px}
.write-box-meal h4 { font-size: 15px; color: #333; font-weight: 600; margin-bottom: 10px}
.write-box-meal .inner { display: flex}

/* thumb */
.write-box-meal .thumb-area { display: flex; flex-direction: column; margin-right: 10px}
.write-box-meal .thumb-area .preview { width: 100px; height: 100px; background: url("/assets/img/app/meal_img.svg") center no-repeat; border-radius: 4px; margin-bottom: 10px; overflow: hidden}
.write-box-meal .thumb-area .preview img { display: block; width: 100%; height: 100%; object-fit: cover}
/*.write-box-meal .item1 .thumb-area .preview { background-color: #F9E2CA}
.write-box-meal .item2 .thumb-area .preview { background-color: #F9D7CF}
.write-box-meal .item3 .thumb-area .preview { background-color: #C8EDDF}*/
.write-box-meal .thumb-area .preview { background-color: #D0EFCC}

/* btn img choice */
.write-box-meal .thumb-area .btn-img-choice { display: flex; align-items: center; justify-content: center; height: 40px; border: 1px solid #ddd; border-radius: 4px}
.write-box-meal .thumb-area .btn-img-choice span { display: block; font-size: 13px; color: #333; background: url("/assets/img/app/ico_camera_gray.svg") 0 center no-repeat; padding-left: 25px}

/* textarea */
.write-box-meal .text-area { flex: 1}
.write-box-meal .text-area textarea.form-basic { height: 100% !important;}

.meal-write-con .btn-line { }

/* datepicker */
.datepicker-date-display .year-text { font-size: 22px; color: #fff}
.datepicker-date-display .date-text { font-size: 18px; line-height: 40px}

/* modal */
.photo-in-md ul li { font-size: 15px;}
.photo-in-md ul li a { display: flex; align-items: center; font-weight: 500; padding: 12px 0}
.photo-in-md ul li img { display: block; margin-right: 10px}
.photo-in-md ul li:first-child a { padding-top: 0}
.photo-in-md ul li:last-child a { padding-bottom: 0}



/*========================
Bill : 과금내역
========================*/
.search-box { background: #fff; padding: 10px 0 30px 0}
.search-box .btn-line.line { border-top: 1px solid #ddd; padding-top: 20px}
/*.search-box .btn-line .btnn { width: calc(50% - 5px)}*/
.search-box .btn-line.choice { margin-top: 10px}
.search-box .btn-line.choice .btnn { height: 34px; background: #fff; border-color: #ddd}
.search-box .btn-line.choice .btnn.active { color: #fff; background: #809ED9; border-color: #809ED9}

/*.bill-con .form-flex .col + .col { margin-left: 10px}*/

.price-list { padding: 30px 0}
.price-list li + li { margin-top: 30px}
.price-list li .title { font-size: 15px; font-weight: 600; border-bottom: 1px solid #52555C; padding-bottom: 10px; margin-bottom: 20px}
.price-list li .sum { padding: 20px}
.price-list li .info + .sum { margin-top: 15px}

.price-list li dl.total + dl { border-top: 1px solid #ddd; padding-top: 10px; margin-top: 10px}

.price-list li dl.total.top-line { border-top: 1px solid #ddd; border-bottom: 0; padding-top: 12px; padding-bottom: 0; margin-top: 12px}


/*========================
Purchase : 구매내역
========================*/
.order-list { padding-top: 30px}
.order-list li.no-data { background: #fff; border-radius: 10px}
.price-list li .dot-info { border-top: 1px dashed #999; padding-top: 15px; margin-top: 15px}
.price-list li .dot-info:first-child { border-top: 0; padding-top: 0; margin-top: 0}
.price-list li .dot-info .tit dt { width: 50px; color: #000; font-weight: 500}
.price-list li .dot-info .tit dd { text-align: left}

.price-list-small { padding: 30px 0}
.price-list-small li { background: #fff; border-radius: 10px; border: 1px solid #e9e9e9}
.price-list-small li + li { margin-top: 10px}
.price-list-small li .title { font-size: 14px; color: #111; font-weight: 500; border-bottom: 1px solid #e9e9e9; padding: 14px 10px 11px 10px}
.price-list-small li .title .book { color: #111; font-weight: 500; background: url("/assets/img/app/ico_book.svg") 0 3px no-repeat; padding-left: 22px}
.price-list-small li .info { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 20px; padding: 12px 10px}
/*.price-list-small li .info::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; height: 100%; background: #ddd}*/
.price-list-small li .info dl { width: calc(50% - 10px)}
.price-list-small li .info dl + dl { margin-top: 0}
.price-list-small li.sum { background: #FCF2F0; border-color: #f7dbdc}
.price-list-small li.sum .title { color: #a23d47; font-weight: 600; border-bottom-color: #fff}
.price-list-small li.sum .info { background: #FCF2F0}
.price-list-small li.sum dt { color: #333}
.price-list-small li.sum dd { color: #333; font-weight: 600}


/*========================
Payment : 수납현황
========================*/
/*.payment-list ul li:first-child { border-top: 1px solid #52555C}
.payment-list ul li:last-child:not(:nth-child(2n)) { border-bottom: 1px solid #ddd}*/

.list-top { padding-top: 30px}
.list-top .conbox { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 15px}
.list-top h4 { font-size: 16px; color: #000; font-weight: 500}
.payment-list.price-list { padding-top: 0}
.payment-list .btn-line { margin-bottom: 15px}
.payment-list ul li { display: block; background: #fff; border-radius: 10px; padding: 15px}
.payment-list ul li + li { margin-top: 10px}
.payment-list ul li.sum-total { margin-top: 20px}
.payment-list.price-list li .sum { padding: 0}
/*.payment-list ul li a { display: block; background: #fff; border-radius: 10px; padding: 15px}*/
/*.payment-list ul li:nth-child(2n) a { background: #f5f5f5}*/

.payment-list ul li .tit { display: block; font-size: 15px; color: #333; font-weight: 600; letter-spacing: 0; margin-bottom: 5px}
.payment-list ul li .under-con p { display: flex; align-items: center}
.payment-list ul li .under-con em { position: relative; display: block; font-size: 12px; color: #999; font-weight: 500; white-space: nowrap}
.payment-list ul li .under-con em + em { padding-left: 20px}
.payment-list ul li .under-con em + em::before { content: ""; position: absolute; left: 10px; top: 50%; width: 1px; height: 12px; background: #ddd; transform: translateY(-50%)}

.payment-list ul li .under-con .date { letter-spacing: 0}
.payment-list ul li .under-con .pay-info { position: relative; display: inline-flex; align-items: center}
.payment-list ul li .under-con .pay-info i { display: block; width: 14px; height: 14px; background-position: center; background-repeat: no-repeat; margin-left: 3px; margin-top: -1px}
.payment-list ul li .under-con .pay-info i.no { background-image: url("/assets/img/app/pay_no.svg")}
.payment-list ul li .under-con .pay-info i.yes { background-image: url("/assets/img/app/pay_yes.svg")}

.payment-list ul li .under-con .price { font-size: 14px; font-weight: 500; margin-left: auto}
.payment-list ul li .under-con .price i { color: #111; font-weight: 600}
/*.payment-list ul li .under-con .price i { display: inline-flex; align-items: center; font-weight: 400; background: url("/assets/img/app/link_arr.svg") right center no-repeat; padding-right: 12px}*/


/*========================
Payment View : 수납현황 상세
========================*/
.payment-view-con { padding-top: 30px}
h4.list-title.ico-bill { position: relative; line-height: 1.5; padding: 0 20px 0 50px; margin-bottom: 30px}
h4.list-title.ico-bill::before { content: ""; position: absolute; left: 20px; top: 3px; width: 20px; height: 20px; background: url("/assets/img/app/ico_bill.svg") center no-repeat;}