@charset "utf-8";

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url('../font/Pretendard-ExtraBold.woff2') format('woff2'), url('../font/Pretendard-ExtraBold.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url('../font/Pretendard-Bold.woff2') format('woff2'), url('../font/Pretendard-Bold.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url('../font/Pretendard-SemiBold.woff2') format('woff2'), url('../font/Pretendard-SemiBold.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url('../font/Pretendard-Medium.woff2') format('woff2'), url('../font/Pretendard-Medium.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url('../font/Pretendard-Regular.woff2') format('woff2'), url('../font/Pretendard-Regular.woff') format('woff');
}

:root {--color-title:#222; --color-text:#555; --color-gray:#aaa; --color-primary:#494E8F; --color-point:#F97173; --color-lightgray:#eee;
    --font-big:1.8rem; --font-large:1.6rem; --font-medium:1.4rem; --font-size:1.2rem;
    /* --choice-color01:#FBD3D7; --choice-color02:#FBE8BC; --choice-color03:#C9EBF9; --choice-color04:#EEE7DB;
    --choice-color05:#FFE1D2; --choice-color06:#DDF1BF; --choice-color07:#E5D6F9; --choice-color08:#DDDDDD; */
    --color-exercise:#FFB589; --color-practice:#9ECC74; --color-public:#D5A99B;

	--choice-color01:#FFEBE6; --choice-color02:#EEEFF8; --choice-color03:#F0E7F5;
}

/* Vue 깜빡임 방지용 */
[v-cloak] { display:none; }

/* CSS 초기화 */
html, body {width:100%; font-size:var(--font-size, 1.2rem); font-family:'Pretendard', 'Malgun Gothic', sans-serif; font-weight:500; color:var(--color-text, #555); background:#fff; letter-spacing:-0.01em; }
html,body,div,main,nav,aside,section,article,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,
q,s,samp,small,strike,strong,sub,/*sup,*/var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend, 
table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin:0; margin-block:0; padding:0; border:0; line-height:1.4; vertical-align:baseline; -webkit-text-size-adjust:none; text-decoration:none; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } 
p, li, dt, dd, span, em {margin-top:-2px; margin-bottom:-2px}
ol, ul {list-style: none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,/*select,option,*/.dropdown {font-family:inherit;font-size:var(--font-size, 1.2rem); font-weight:600; background-color:#fff;}

input[type='text'], input[type='password'] {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-appearance:none; -moz-appearance:none; outline-style:none; }
textarea {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-appearance:none; -moz-appearance:none; outline-style:none; }
/* select {margin:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } */
button {-webkit-appearance:none; -moz-appearance:none; outline-style:none; cursor:pointer;}
button, a {padding:0; margin:0; background:transparent; border:0; outline:0; cursor:pointer; font-size:inherit; font-family:inherit; color:inherit; text-decoration:none; }
input, /*select,*/ textarea, .input, .dropdown, .dropdown > ul {width:100%; height:3.6rem; padding:0 1.6rem; margin:0; outline:0; border-radius:1.8rem; border:1px solid var(--color-lightgray, #eee); color:#333;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

input[type="radio"], input[type="checkbox"] {-webkit-appearance:none; -moz-appearance:none; appearance:none; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance:none; margin:0; }
input[type=number] {-moz-appearance: textfield;}
input[type=date]::-webkit-inner-spin-button {-webkit-appearance:none; -moz-appearance:none; appearance:none;}
input[type="search"] {-webkit-appearance:searchfield;}  /* ios 이슈 */
[type="search"]::-webkit-search-cancel-button {-webkit-appearance:searchfield-cancel-button;}
input[type="search"]::-ms-clear, input::-ms-reveal{display:none;}
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration{display:none; }
input[type="file"] {display:none;}

/* select {cursor:pointer; -webkit-appearance:none; -moz-appearance:none; appearance:none; background:#fff url(../images/ico_select.svg) no-repeat calc(100% - 16px) center / 6px 3px;}
select::-ms-expand {display:none} */
button:active, a:active, input[type="reset"]:active, input[type="submit"]:active {opacity:0.8;}
em {font-style:normal;}
i {font-size:0;}
hr { display:block; margin:0; padding:0; border:0; background-color:#e1e1e1; }
table {border-collapse:collapse; border-spacing: 0; }


/* placeholder */
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color:var(--color-gray, #aaa); font-size:var(--font-size, 1.2rem);}
::-moz-placeholder { /* Firefox 19+ */ color:var(--color-gray, #aaa); font-size:var(--font-size, 1.2rem);}
:-ms-input-placeholder { /* IE 10+ */ color:var(--color-gray, #aaa); font-size:var(--font-size, 1.2rem);}
:-moz-placeholder { /* Firefox 18- */ color:var(--color-gray, #aaa); font-size:var(--font-size, 1.2rem);}

/* 스크롤 */
::-webkit-scrollbar-track { background-color:#f5f5f5; }
::-webkit-scrollbar {width:0px; background:transparent; height:0px !important; }
::-webkit-scrollbar-thumb {background-color:#aaa; }

/* form style 폼요소 클래스에 따른 상태 표시 .error, .disable */
.label {display:block; margin-top:-2px; margin-bottom:-2px; padding-left:1rem; margin-bottom:1.2rem; font-size:var(--font-medium, 1.4rem); color:var(--color-title, #222); font-weight:700; line-height:1.46;}

input:focus {border-color:var(--color-gray, #aaa); font-weight:700}
input.error {color:var(--color-point, #F97173); border-color:var(--color-point, #F97173); font-weight:700}
input.disable {color:var(--color-title, #222); border-color:var(--color-lightgray, #eee); background-color:var(--color-lightgray, #eee); font-weight:700}

/* select placeholder */
/* option {color:#333}
select, select:required:invalid {color:var(--color-gray, #aaa); }
option[value=""][disabled] {color:var(--color-gray, #aaa);}
option[selected] {color:#333;} */

/* 드롭다운 */
.dropdown {position:relative; background-color:#fff; transition:.4s; text-align:left;}
.dropdown.blue {background-color:var(--color-primary, #494E8F); width:17.6rem; border-color:var(--color-primary, #494E8F);}
.dropdown.blue-white {background-color:var(--color-primary, #494E8F); color: white; border-color:var(--color-primary, #494E8F);}
.dropdown.blue .placeholder {color:#fff;}
.dropdown.blue:after .placeholder {background:url(../images/ico_select.svg) no-repeat 0 0 / 100% 100%;}
.dropdown:after {content:''; position:absolute; top:1.4rem; right:1.4rem; display:block; width:7.5px; height:4.5px; background:url(../images/ico_select.svg) no-repeat 0 0 / 100% 100%; }
.dropdown.show {border-color:var(--color-gray, #aaa);}
.dropdown.disable {background-color:var(--color-lightgray, #eee);}
.dropdown.disable .placeholder {color:#333; font-weight:700;}
.dropdown.show:after {transform:rotate(180deg)}
.dropdown .placeholder {height:3.6rem; padding:0; color:var(--color-gray, #aaa); font-weight:600}
.dropdown .placeholder.active {color:var(--color-title, #222); font-weight:700;}
.dropdown.blue .placeholder.active {color:#fff}
.dropdown .dropdown-list {position:absolute; z-index:2; top:3.8rem; left:0; width:100%; padding:4px; background-color:#fff; border-radius:1rem; border:1px solid var(--color-lightgray, #eee); opacity:0; visibility:hidden; box-shadow:0px 0px 12.5px 0px rgba(0, 0, 0, 0.05); transition:.4s;}
.dropdown .dropdown-list > ul {max-height:13.6rem; height:auto; padding:0.5rem 0.4rem; overflow-y:auto;}
.dropdown.show .dropdown-list {max-height:15.2rem; opacity:1; visibility:visible;}
.dropdown ul {width:calc(100% - 0.4rem); }
.dropdown li {position:relative; display:flex; align-items:center; height:3.2rem; padding:0 1.2rem; color:var(--color-gray, #aaa);}
.dropdown li.select {color:#333; font-weight:700; }
.dropdown li.select:before {content:''; position:absolute; z-index:-1; left:0; top:0; display:block; height:3.2rem; width:calc(100% + 4px); background-color:var(--color-lightgray, #eee); border-radius:0.5rem;}
.dropdown ul::-webkit-scrollbar-track { background-color:var(--color-lightgray, #eee); }
.dropdown ul::-webkit-scrollbar {width:2px; background: transparent; height: 0px !important; }
.dropdown ul::-webkit-scrollbar-thumb { background-color:var(--color-gray, #aaa)}


/* 검색창 */
.search-box {position:relative; display:flex; width:100%; height:5rem; padding:0 1.6rem; border-radius:2.5rem; background:#fff; border:1px solid var(--color-lightgray, #eee); box-shadow:0px 2.5px 4px 0px rgba(0, 0, 0, 0.06);}
.search-box input {width:100%; height:100%; margin-right:5rem; padding:0; border:0; outline:0; font-size:1.2rem; color:var(--color-title, #222); font-weight:600;}
.search-box .btn-reset {position:absolute; top:50%; right:4.85rem; display:none; width:1.8rem; height:1.8rem; transform:translate(0, -50%); border:0; outline:0; background:transparent url(../images/ico_reset.svg) no-repeat center / 1.8rem 1.8rem; font-size:0}
.search-box .btn-search {position:absolute; top:50%; right:1.6rem; width:3rem; height:3rem; border:0; outline:0; transform:translate(0, -50%); background:transparent url(../images/ico_srch_b.svg) no-repeat center / 100% 100%; font-size:0}

/* 비밀번호 input*/
.pwdbox {position:relative; display:block;}
.pwdbox input + i {position:absolute; right:0.8rem; bottom:0.3rem; display:block; width:3rem; height:3rem; background:url("../images/ico_eye_no.svg") no-repeat 0 0 / cover;}
.pwdbox input + i.visible {position:absolute; right:0.8rem; bottom:0.3rem; display:block; width:3rem; height:3rem; background:url("../images/ico_eye.svg") no-repeat 0 0 / cover;} 
.pwdbox + .error-msg {display:none;}
.pwdbox.error input {color:var(--color-point, #F97173); border-color:var(--color-point, #F97173); font-weight:700}
.pwdbox.error + .error-msg {display:block; margin-top:0.9rem; margin-left:1rem; font-size:1.2rem; color:var(--color-point, #F97173);}
.pwdbox.disable input {color:var(--color-title, #222); border-color:var(--color-lightgray, #eee); background-color:var(--color-lightgray, #eee); font-weight:700}
.pwdbox.error input + i {background:url("../images/ico_eye_no_red.svg") no-repeat 0 0 / cover;}
.pwdbox.error input + i.visible {background:url("../images/ico_eye_red.svg") no-repeat 0 0 / cover;}

/* 체크박스 */
.checkbox {display:flex; align-items:center; white-space:nowrap; }
.checkbox label {vertical-align:middle; cursor:pointer;} 
.checkbox input {display:none;}        
.checkbox i {flex:none; display:block; width:1.4rem; height:1.4rem; margin-right:0.5rem; background:url("../images/checkbox_off.svg") no-repeat 0 0 / 100% 100%;}
.checkbox em {/*margin:0; line-height:0;*/ font-weight:600; color:var(--color-gray, #aaa); white-space:normal;}
.checkbox input:checked + i {background:url("../images/checkbox_on.svg") no-repeat 0 0 / 100% 100%;}
.checkbox input:checked ~ em {color:var(--color-text, #555); font-weight:700}

/* 라디오 */
.radiobox {display:flex; align-items:center; white-space:nowrap; }
.radiobox label {vertical-align:middle; cursor:pointer;}                       
.radiobox input {display:none;}
.radiobox i {flex:none; display:block; width:1.4rem; height:1.4rem; margin-right:0.5rem; background:url("../images/radio_off.svg") no-repeat 0 0 / 100% 100%;}
.radiobox em {/*margin:0; line-height:0;*/ font-weight:600; color:var(--color-gray, #aaa); white-space:normal;} 
.radiobox input:checked + i {background:url("../images/radio_on.svg") no-repeat 0 0 / 100% 100%;}
.radiobox input:checked ~ em { color:var(--color-text, #555); font-weight:700}

/* 긴글입력 상자 & textarea */
.textare-box {position:relative; height:15.6rem; margin-top:1rem; padding:1.4rem 1rem 1.4rem 1.6rem; color:var(--color-gray, #aaa); background-color:#f9f9f9; border:1px solid var(--color-lightgray, #eee); border-radius:1rem;}
.textare-box:after {content:''; position:absolute; left:0; bottom:0; height:4.5rem; width:100%; background:linear-gradient(180deg, rgba(249, 249, 249, 0.00) 0%, #F9F9F9 100%); border-radius:0 0 1rem 1rem;}
.textare-box .textare-inner {height:12rem; padding-right:6px; color:var(--color-text, #555); overflow-y:auto; line-height:1.4;}
.textare-box textarea {min-height:10.6rem; padding:0; padding-right:6px; color:#333; line-height:1.4; border:0; border-radius:0; background-color:transparent; font-weight:500; resize:none;}
.textare-box .textare-inner::-webkit-scrollbar-track, .textare-box textarea::-webkit-scrollbar-track, .popup .pop-content::-webkit-scrollbar-track { background-color: #e9e9e9; }
.textare-box .textare-inner::-webkit-scrollbar, .textare-box textarea::-webkit-scrollbar, .popup .pop-content::-webkit-scrollbar { width:2px; background:transparent; height:0px !important; }
.textare-box .textare-inner::-webkit-scrollbar-thumb, .textare-box textarea::-webkit-scrollbar-thumb, .popup .pop-content::-webkit-scrollbar-thumb { background-color:var(--color-gray, #aaa); }
.textare-box .textare-inner .placeholder {color:var(--color-gray, #aaa)}
.textare-box .textare-inner .active {color:#333}
.textare-box .text-count {position:absolute; left:1.6rem; bottom:1.6rem; font-weight:500}

/* 날짜 input date */
input[type="date"]:not(:focus):invalid::-webkit-datetime-edit-text, input[type="date"]:not(:focus):invalid::-webkit-datetime-edit-month-field,
input[type="date"]:not(:focus):invalid::-webkit-datetime-edit-day-field, input[type="date"]:not(:focus):invalid::-webkit-datetime-edit-year-field {-webkit-appearance:none; display:none; }

input[type="date"]::-webkit-calendar-picker-indicator {position:absolute; top:0; left:0; width:100%; height:100%; background:transparent; color:transparent; cursor:pointer; z-index:1; }
input[type="date"] {position:relative; background:#fff url('../images/ico_calendar.svg') no-repeat calc(100% - 8px) center / contain;} 
input[type='date']::before {content:attr(placeholder); display:flex; align-items:center; margin-top:13px; height:3.4rem; width:100%; color:var(--color-gray, #aaa); font-weight:600;}

input[type="date"]::-webkit-clear-button, input[type="date"]::-webkit-inner-spin-button {display:none; }
input[type="date"]:focus:before, input[type="date"]:valid::before {-webkit-appearance:none; display: none; }
input[type="date"]:focus::before::-webkit-datetime-edit-text, input[type="date"]:valid::before::-webkit-datetime-edit-text, 
input[type="date"]:focus::before::-webkit-datetime-edit-month-field, input[type="date"]:valid::before::-webkit-datetime-edit-month-field,
input[type="date"]:focus::before::-webkit-datetime-edit-day-field, input[type="date"]:valid::before::-webkit-datetime-edit-day-field,
input[type="date"]:focus::before::-webkit-datetime-edit-year-field, input[type="date"]:valid::before::-webkit-datetime-edit-year-field
 {-webkit-appearance:none; display: none; }
input[type="date"]:disabled {background-color:var(--color-lightgray, #eee); color:var(--color-title, #222);}
input[type="date"].error {background:#fff url('../images/ico_calendar_error.svg') no-repeat calc(100% - 8px) center / contain;}

.btn-calendar {height:3.6rem; width:3.6rem;}
.btn-calendar input[type="date"] {width:3.6rem; padding:0; background-position:center center; background-color:transparent; border:0}
.btn-calendar input[type="date"], .btn-calendar input[type="date"]:focus, .btn-calendar input[type="date"]:valid {color:transparent} 
.btn-calendar input[type="date"]::-webkit-datetime-edit-year-field {color:transparent; background-color:transparent;}

/* input text일때 달력 스타일 */
input.date-style {background:#fff url('../images/ico_calendar.svg') no-repeat calc(100% - 8px) center / contain;}

/* 진행상황 바 */
.progress {appearance:none;}
.progress::-webkit-progress-bar {height:4px; background:#f0f0f0; border-radius:2px;}
.progress::-webkit-progress-value {border-radius:2px; background:var(--color-gray, #aaa); }


/* 버튼들 */
button[class^='btn'] {display:flex; flex-direction:row; align-items:center; justify-content:center; min-height:3.6rem; width:12rem; padding-top:1rem; padding-bottom:1rem; font-size:var(--font-size, 1.2rem); font-weight:600; border-radius:2.8rem; background-color:#fff; border:1px solid var(--color-lightgray, #eee); color:var(--color-gray, #aaa)}
button.small {height:2.8rem; width:9.2rem}
button.medium {min-width:17.8rem; width:auto; padding:0 2.4rem;}
button.btn-primary {background:var(--color-primary, #494E8F); color:#fff; border-color:var(--color-primary, #494E8F)}
button.btn-point {background:var(--color-point, #F97173); color:#fff; border-color:var(--color-point, #F97173)}
button.btn-second {width:auto; padding:0 1.4rem; background:#BA805E; color:#fff; border-color:#BA805E}
button.btn-gray {background:var(--color-gray, #aaa); color:#fff; border-color:var(--color-gray, #aaa)}
button.btn-whiteGray {color:var(--color-gray, #aaa); border-color:var(--color-lightgray, #eee); }
button.btn-white {background:#fff; color:var(--color-primary, #494E8F); border-color:var(--color-primary, #494E8F)}
button.btn-light {width:100%; height:4.2rem; background-color:#f5f5f5; border-color:#f5f5f5; color:var(--color-title, #222); border-radius:0.6rem;}
button.btn-cancel {min-width:22rem; width:auto; padding:0 2.4rem; border:1px solid #ddd; color:var(--color-point, #F97173); }
button.btn-inactive {width:100%}
button.btn-inactive.active {width:100%; background:#fff; color:var(--color-primary, #494E8F); border-color:var(--color-primary, #494E8F)}

button.btn-menu {width:3rem; height:3rem; background:url(../images/ico_menu.svg) no-repeat center center / 100% 100%; font-size:0; border:0}
button.btn-search {width:3rem; height:3rem; background:url(../images/ico_srch.svg) no-repeat center center / 100% 100%; font-size:0; border:0}
button.btn-alarm {width:3rem; height:3rem; background:url(../images/ico_alarm.svg) no-repeat center center / 3rem 3rem; font-size:0; border:0}
button.btn-back {width:4rem; height:4rem; background:url(../images/ico_back.svg) no-repeat center center / 100% 100%; font-size:0; border:0}
button.btn-close {width:3rem; height:3rem; background:url(../images/ico_close.svg) no-repeat center center / 100% 100%; font-size:0; border:0}
button.btn-closeWhite {width:3rem; height:3rem; background:url(../images/ico_close_w.svg) no-repeat center center / 100% 100%; font-size:0; border:0}
button.btn-plus {width:3rem; height:3rem; background:url(../images/ico_plus_header.svg) no-repeat center center / 100% 100%; font-size:0; border:0}
button.btn-edit {width:3.8rem; height:3.775rem; background:url(../images/btn_edit.svg) no-repeat 0 0 / 100% 100%; font-size:0; border:0;}
button.btn-more {width:2rem; height:2rem; background:url(../images/ico_arrow.svg) no-repeat 0 0 / 100% 100%; font-size:0; border:0;}
button.btn-more-circle {width:2.25rem; height:2.25rem; min-height:auto; background:url(../images/ico_arrow_circle.svg) no-repeat 0 0 / 2.2rem 2.2rem; font-size:0; border:0;}
button.btn-more-circle-w {width:2.25rem; height:2.25rem; min-height:auto; background:url(../images/ico_arrow_circle_w.svg) no-repeat 0 0 / 2.2rem 2.2rem; font-size:0; border:0;}
button.btn-del {width:1.6rem; height:1.6rem; background:url(../images/ico_x.svg) no-repeat 0 0 / 100% 100%; font-size:0; border:0;}
button.btn-trash {width:3rem; height:3rem; background:url(../images/ico_del.svg) no-repeat center center / 3rem 3rem; font-size:0; border:0}
button.btn-attach, .btn-attach {display:flex; align-items:center; justify-content:center; height:4.2rem; width:100%; gap:6px; background-color:var(--color-point, #F97173); border-radius:6px; color:#fff; font-size:var(--font-size, 1.2rem); font-weight:600}
button.btn-attach:before, .btn-attach:before {content:''; display:block; width:1.3rem; height:1.4rem; background:url(../images/ico_attch.svg) no-repeat center center / 100% 100%; font-size:0; border:0}
button.btn-emotion, button.btn-bgColor {min-width:13rem; height:3.6rem; gap:4px; background-color:var(--color-point, #F97173); color:#fff; border:0}
button.btn-emotion:before {content:''; display:block; width:1.4rem; height:1.4rem; background:url(../images/ico_smile_w.svg) no-repeat center center / 100% 100%; font-size:0; border:0}
button.btn-bgColor:before {content:''; display:block; width:1.4rem; height:1.4rem; background:url(../images/ico_img_w.svg) no-repeat center center / 100% 100%; font-size:0; border:0}
button.btn-calendar {width:3rem; height:3rem; background:transparent url(../images/ico_calendar.svg) no-repeat 0 0 / 100% 100%; border:0; color:transparent; }
button.btn-join {width:3rem; height:3rem; background:transparent url(../images/ico_menu_join_off.svg) no-repeat 0 0 / 100% 100%; border:0; color:transparent; }
button.btn-logInIco {width:3rem; height:3rem; background:transparent url(../images/ico_login_off.svg) no-repeat 0 0 / 100% 100%; border:0; color:transparent; }
button.btn-logOutIco {width:3rem; height:3rem; background:transparent url(../images/ico_logout_off.svg) no-repeat 0 0 / 100% 100%; border:0; color:transparent; }
button.btn-my {width:3rem; height:3rem; background:transparent url(../images/ico_mypage.svg) no-repeat 0 0 / 100% 100%; border:0; color:transparent; }

.badge-new {position:absolute; display:block; width:1.6rem; height:1.6rem; background: url(../images/badge_new.svg) no-repeat 0 0 / 100% 100%; font-size:0}
button.btn-copy {width:3rem; height:3rem; background:transparent url(../images/ico_copy.svg) no-repeat 0 0 / 100% 100%; border:0; font-size:0}
button.btn-copy.hidden {width:3rem; height:3rem; background:transparent no-repeat 0 0 / 100% 100%; border:0; font-size:0}
button.btn-copyWhite {width:2rem; height:2rem; background:transparent url(../images/ico_copy_w.svg) no-repeat 0 0 / 100% 100%; border:0; font-size:0}


/* 달력 */
#CalendarBox { top:0; left:0; padding:5px; border:solid 2px #333; font-size:12px; background-color:#fff; z-index:99001; position:absolute; }
#CalendarBox .pointer { cursor:pointer; }
#CalendarBox .clear { display:block; float:none; clear:both; height:0; width:100%; font-size:0 !important; line-height:0 !important; overflow:hidden; margin:0 !important; padding:0 !important; }
#CalendarBox div.Header { float:left; text-align:center; color:#000; }
#CalendarBox div.Header form { float:left; width:230px; margin:0; padding:0; }
#CalendarBox div.Header form select { font-size:12px; vertical-align: middle; }
#CalendarBox div.Header form img { cursor:pointer; vertical-align: middle; }
#CalendarBox div.Header form select { font:12px 'Tahoma'; vertical-align: middle; }
#CalendarBox div.Header p { float: right; width:230px; margin:0; padding:5px 0 0 0; text-align:center; color:#000; }
#CalendarBox div.Header p strong { font:12px 'Tahoma'; font-weight:bold; }
#CalendarBox div.ListBox { float:left; margin:7px 0; padding-bottom:5px; border-top:dashed 1px #9c9c9c; border-bottom:dashed 1px #9c9c9c; }
#CalendarBox div.ListBox table { float:left; width:230px; margin-right:10px; table-layout:fixed; }
#CalendarBox div.ListBox table.Right { margin-right:0; }
#CalendarBox div.ListBox table tr th { height:24px; font-size:0.75rem; text-align:center; background-color:#F5F5F5; color:#555; }
#CalendarBox div.ListBox table tr td { height:22px; font-size:0.8125rem; text-align:center; color:#000; }
#CalendarBox div.ListBox .Disabled { color:#ccc; cursor:default; }
#CalendarBox div.ListBox .Focus { background-color:#f0f0f0; cursor:pointer; }
#CalendarBox div.ListBox .Sun { color:#ff3300; }
#CalendarBox div.ListBox .Sat { color:#0066ff; }
#CalendarBox div.ListBox .Today { background-color:#ff3333; font-size:100%; font-weight:bold; color:#fff; }
#CalendarBox div.Btn { text-align: right; }
#CalendarBox select.select-style { width: 30%; }

/* Loading Box */
#__Loading_Box {z-index:80000; position:fixed; top:0; left:0; width:100%; height:100%;}
#__Loading_Box > div.inner-box {position:relative; display:table; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.7);}
#__Loading_Box > div.inner-box > div.message-box {display:table-cell; vertical-align:middle; text-align:center; font-size:13px; color:#fff;}
#__Loading_Box > div.inner-box > div.message-box div.icon-box {height:60px;}
#__Loading_Box > div.inner-box > div.message-box span.icon {display: inline-block; width: 15px; height: 15px; background-color: #fcdc29; border-radius:50%; animation:loading 1s infinite;  transform-origin:bottom center;  position:relative;}
#__Loading_Box > div.inner-box > div.message-box span.icon1 {animation-delay: 0.1s;}
#__Loading_Box > div.inner-box > div.message-box span.icon2 {animation-delay: 0.2s;}
#__Loading_Box > div.inner-box > div.message-box span.icon3 {animation-delay: 0.3s;}
#__Loading_Box > div.inner-box > div.message-box span.icon4 {animation-delay: 0.4s;}
#__Loading_Box > div.inner-box > div.message-box span.icon5 {animation-delay: 0.5s;}
#__Loading_Box > div.inner-box > div.message-box p.message {font-size:13px;}

@keyframes loading {
	0%{
		transform: translateY(0px);
		background-color: #fcdc29;
	}
	50%{
		transform: translateY(30px);
		background-color: #ef584a;
	}
	100%{
		transform: translateY(0px);
		background-color: #fcdc29;
	}
}

/* Layer Popup Style */
#LayerPopupBox > div.layer-popup-box {}
#LayerPopupBox > div.layer-popup-box div.disabled-box {position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.5);}
#LayerPopupBox > div.layer-popup-box div.layer-popup {position:absolute; top:0; left:0;}
#LayerPopupBox > div.layer-popup-box div.layer-popup {box-shadow:3px 3px 7px 0 rgba(0,0,0,0.35); -webkit-box-shadow:3px 3px 7px 0 rgba(0,0,0,0.35); -moz-box-shadow:3px 3px 7px 0 rgba(0,0,0,0.35)}
#LayerPopupBox > div.layer-popup-box div.layer-popup {overflow:hidden; border-radius:5px 5px 5px 5px; -moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px;}
#LayerPopupBox > div.layer-popup-box div.title-bar {position:relative; height:6rem; background-color:#fff; box-sizing:border-box;}
#LayerPopupBox > div.layer-popup-box div.title-bar * {box-sizing:border-box;}
#LayerPopupBox > div.layer-popup-box div.title-bar h3 {height:6rem; line-height:6rem; padding-left:2rem; font-size:1.6rem; font-weight:bold; color:#fff;}
#LayerPopupBox > div.layer-popup-box div.title-bar h3 > em {display:inline-block; margin-left:5px; font-size:13px; font-weight:bold; color:#fff;}
#LayerPopupBox > div.layer-popup-box div.title-bar p.btn-close {position:absolute; top:1.8rem; right:2rem; width:2.4rem; height:2.4rem; background:url('/images/ico_close.png') no-repeat 0 0; background-size:2.4rem 2.4rem;}
#LayerPopupBox > div.layer-popup-box div.title-bar p.btn-close:hover {cursor:pointer;}
#LayerPopupBox > div.layer-popup-box div.contents {overflow-x:hidden; overflow-y:auto; position:relative; width:100%; height:calc(100% - 6rem); background-color:#fff;}
#LayerPopupBox > div.layer-popup-box div.contents {padding:1.5rem; box-sizing:border-box;}
#LayerPopupBox > div.layer-popup-box div.contents div.page-loading {height:6rem; line-height:6rem; text-align:center; font-size:1.3rem;}
#LayerPopupBox > div.layer-popup-box div.contents div.page-loading img {vertical-align:middle;}
#LayerPopupBox > div.layer-popup-box div.contents div.pop-sub-title {position:relative; width:100%; height:52px; border-bottom:2px solid #231f20; box-sizing:border-box;}
#LayerPopupBox > div.layer-popup-box div.contents div.pop-sub-title.noline {border-bottom-style:none;}
#LayerPopupBox > div.layer-popup-box div.contents div.pop-sub-title * {box-sizing:border-box;}
#LayerPopupBox > div.layer-popup-box div.contents div.pop-sub-title > h5 {height:5rem; line-height:5rem; font-size:1.6rem; font-weight:bold; color:#231f20;}
#LayerPopupBox > div.layer-popup-box div.contents div.pop-sub-title > div.button {position:absolute; top:0; right:0; height:4rem; text-align:right;}
#LayerPopupBox > div.layer-popup-box div.contents div.pop-sub-title > div.button button {margin-left:1rem;}
#LayerPopupBox > div.layer-popup-box div.contents div.pop-button {width:100%; height:5rem; margin-top:1.3rem; text-align:center;}
#LayerPopupBox > div.layer-popup-box div.contents div.pop-button button {margin-left:1rem;}
#LayerPopupBox > div.layer-popup-box div.contents div.pop-button button:first-child {margin-left:0;}



/* 전체 레이아웃 및 공통적용 ui */
html {font-size:62.5%; background-color: #fff; -webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0,0,0,0) ;}
/* html, body, div.page-panel {height:100%; } */
section {padding:4rem 2rem 6rem 2rem}
section.bottom-space {padding:4rem 2rem 11rem 2rem}
section.p3 {padding:4rem 3rem}
section + section {padding-top:2rem}
.vh-ele {height:100vh !important; height:calc(var(--vh, 1vh) * 100) !important; height:100svh !important; 
  height: -webkit-fill-available !important; height: fill-available !important; } /* 모바일 vh 이슈 */

#contents {height:100%; padding-top:5rem; /*padding-bottom:7rem*/ }
.sub-visual {display:flex; align-items:center; justify-content:center; height:12rem; text-align:center; background:url(../images/picture/img_subvisualBg.jpg) no-repeat 0 0 / cover; /*background:url(../images/picture/img_subvisualBg.webp) no-repeat 0 0 / cover*/;}
.btn-group {display:flex; align-items:center; justify-content:center; gap:1rem}
.row {display:flex; align-items:center; gap:0.8rem; width:100%}
.align-top {align-items:flex-start !important;}
.align-left {justify-content:flex-start !important;}
.align-right {justify-content:flex-end !important;}
.align-side {justify-content:space-between !important;}
.cta {position:fixed; z-index:2; left:0; bottom:6rem; width:100%; }
.cta.full {position:fixed; left:0; bottom:0; width:100%; }
.cta.full button {height:4.4rem; width:100%; border-radius:0;}
.text-center {text-align:center;}
.text-left {text-align:left;}
.text.clamp-3-lines {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;white-space: normal;}
img {max-width:100%}
picture {display:block}
.underline {text-decoration: none;}
.profile img {width:100%; height:100%; object-fit:cover;}

@media (orientation:landscape) {
  .btn-group.cta {position:static; margin-top:4rem}
  .btn-group.cta.full {position:fixed}
}


/* div.no-msg {display:flex; align-items:center; justify-content:center; padding:4rem 0 12rem 0} */
div.no-msg {display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 26rem); padding:0;}
div.no-msg .badge-wrap {display:flex; align-items:center; justify-content:center; flex-direction: column;}
div.no-msg h3{ color: #c0c0c0; font-weight: normal}

.required {margin-left:0.4rem; font-size:var(--font-medium, 1.4rem); color:var(--color-point, #F97173); font-weight:700; line-height:1.46}
.mt18 {margin-top:-1.8rem}
.h100 {height:100%}
.mt0 {margin-top:0 !important}
.mb70 {margin-bottom:7rem !important}
.mb60 {margin-bottom:6rem !important}
.mb40 {margin-bottom:4rem !important}
.mb30 {margin-bottom:3rem !important}
.mb20 {margin-bottom:2rem !important}
.mb16 {margin-bottom:1.6rem !important}
.mb12 {margin-bottom:1.2rem !important}
.mb08 {margin-bottom:0.8rem !important}
.mb0 {margin-bottom:0 !important}
.mbM60 {margin-bottom:-6rem !important}
.mbM10 {margin-bottom:-1rem !important}
.ml10 {margin-left:1rem !important}
.pt10 {padding-top:1rem !important}
.p0 {padding:0 !important}
.p10 {padding-left:1rem !important}
.w50 {width:50% !important}
.w100 {width:100% !important}
.w30 {width:30% !important}
.gap0 {gap:0 !important}
.color-red {color:var(--color-point, #F97173) !important}
.color-primary {color:var(--color-primary, #494E8F) !important}
section hr {height:1.6rem; background-color:#f9f9f9; box-shadow:inset 0px 3px 15px 0px rgba(0, 0, 0, 0.06);}
.legend {display:inline-flex; align-items:center; height:2.2rem; margin:0; padding:0 0.9rem; border:1px solid var(--color-gray, #aaa); color:var(--color-gray, #aaa); border-radius:1.1rem; font-weight:700; line-height:0}
.legend.red {color:var(--color-point, #F97173); border-color:var(--color-point, #F97173)}
.legend.end {color:#aaa; border-color:#aaa}
.legend.ing {color:var(--color-title, #222); border-color:var(--color-title, #222)}
.legend.start, .legend.blue {color:var(--color-primary, #494E8F); border-color:var(--color-primary, #494E8F)}
.legend.best {background-color:var(--color-point, #F97173); color:#fff; border:0}
.welcome-img img, .intro img, .course-img img, .ot img, .lecture-img img, .sponser-wrap img, .review-board img, 
.greeting-wrap > figure img {border-radius:1.2rem;}
.welcome-img picture, .intro picture, .course-img picture, .ot picture, .lecture-img picture, .sponser-wrap picture, 
.review-board picture, .greeting-wrap picture, .greeting-wrap img, .lecture-img picture {border-radius:1.2rem; overflow:hidden; line-height:0}
.btn-text.big {font-size:1.4rem}

/* 애니메이션 효과 */
.ani {opacity:0; transform:translateY(-3rem); transition:opacity 1.2s, transform 0.8s;}
.ani.animate {opacity:1; transform:translateY(0)}
.ani.animate:nth-of-type(2) {transition-delay:0.3s}
.ani.animate:nth-of-type(3) {transition-delay:0.6s}
.ani.animate:nth-of-type(4) {transition-delay:0.9s}

/* 상단 타이틀바 */
.title-bar {position:fixed; z-index:50; display:flex; align-items:center; justify-content:center; width:100%; height:5rem; padding:0 1.2rem; border-bottom:0.5px solid #ddd; background-color:#fff;}
.title-bar .left {position:absolute; top:50%; left:1.2rem; transform:translateY(-50%)}
.title-bar .logo.left {left:2rem}
.title-bar .title {/*width:calc(100% - 6rem);*/ color:var(--color-title, #222); font-size:var(--font-medium, 1.4rem); font-weight:800; text-align:center; line-height:1.46}
.title-bar .btn-group {gap:0}
.title-bar .right {position:absolute; top:50%; right:1.2rem; transform:translateY(-50%)}
.title-bar.main {border-bottom:0}

/* 햄버거 메뉴 */
.lnb {position:fixed; z-index:99999; top:0; left:0; width:100%; height:100%; transform:translate3d(200%,0,0); background-color:#fff; transition:transform .5s; overflow-y:auto;}
.lnb.active {transform:translate3d(0,0,0);}
.lnb .menu-wrap {padding-top:5rem; }
.myinfo-wrap .basic.lnb-header {align-items:flex-start; gap:2rem;}
.lnb-header p {font-size:2rem; font-weight:700; color:var(--color-title, #222)}
.lnb-header .btn-login, .lnb-header .btn-mypage {display:flex; align-items:center; gap:6px; font-weight:600; font-size:var(--font-medium, 1.4rem); color:var(--color-title, #222);}
.lnb-header .btn-login img, .lnb-header .btn-mypage img {width:2.2rem}

.menu-wrap .info-article {padding-bottom:0}
.menu-wrap .search-box {margin:2rem 0 3rem 0;}
.menu-wrap .menu li {margin:0;}
.menu-wrap .menu p {display:flex; align-items:center; justify-content:space-between; height:4.8rem; margin:0; padding:1.6rem 2rem; color:#222; font-size:var(--font-large, 1.6rem); border-bottom:1px solid var(--color-lightgray, #eee); font-weight:700;}
.menu-wrap .menu p:after {content:''; display:block; width:2rem; height:2rem; background:url(../images/ico_arrow_medium.svg) no-repeat 0 0 / 100% 100%; transform:rotate(90deg); transition:.4s}
.menu-wrap .menu p.home:after {display:none;}
.menu-wrap .depth2 {display:flex; flex-direction:column; gap:0; height:0; max-height:0; padding:0; background-color:#F9F9F9; visibility:hidden; opacity:0; transition:max-height .4s; overflow:hidden;}
.menu-wrap .depth2 li {display:block; height:auto; border:0; font-weight:500; font-size:var(--font-medium, 1.4rem); color:#333}
.menu-wrap .depth2 li a {display:block; padding:0.8rem 0;}
.menu-wrap .menu > li.active p:after {transform:rotate(-90deg);}
.menu-wrap .menu > li.active .depth2 {max-height:400px; height:auto; padding:1.5rem 2rem; visibility:visible; opacity:1;}

div.goog-te-gadget {font-size:1.2rem}
.footer-wrap {background-color:#fff;}
.footer-wrap .foot-nav {display:flex; align-items:center; flex-wrap:wrap; width:100%; border:1px solid #eee; background-color:#fff; color:#666}
.footer-wrap .foot-nav li {width:50%; height:4.2rem; margin:0}
.footer-wrap .foot-nav li.w100 {width:100%; border-top:1px solid #eee}
.footer-wrap .foot-nav li:first-child {border-right:1px solid #eee}
.footer-wrap .foot-nav li a {display:flex; align-items:center; justify-content:space-between; width:100%; height:100%; padding:0 1.1rem 0 2rem; font-size:1.2rem; font-weight:600; text-align:center;}
.footer-wrap .foot-nav li a:after {content:''; display:block; width:1.6rem; height:1.6rem; background: url(../images/ico_footer_arrow.svg) no-repeat 0 0 / cover;}

.footer-wrap .footer {padding:3rem 2rem;}
.footer-wrap .footer .call-number {display:flex; align-items:center; color:#555;}
.footer-wrap .footer .call-number > span {width:8.8rem; color:var(--color-primary, #494E8F)}
.footer-wrap .footer .call-number em {font-size:1.8rem; font-weight:700;}
.footer-wrap .footer .etc-info {display:flex; flex-direction:column; gap:1rem; margin-top:2rem; color:#666}
.footer-wrap .footer .etc-info li {display:flex; align-items:center; }
.footer-wrap .footer .etc-info li > span {flex:none; width:8.8rem; font-weight:600; color:#666}

.footer-wrap .footer-bottom {padding:3rem 2rem; color:#fff; background-color:#3C4075;}
.footer-wrap .footer-bottom .policy-nav {display:flex; align-items:center; gap:8px; }
.footer-wrap .footer-bottom .policy-nav li {display:inline-flex; align-items:center; gap:8px;}
.footer-wrap .footer-bottom .policy-nav li:after {content:''; display:block; width:1px; height:12px; background-color:rgba(255, 255, 255, 0.4)}
.footer-wrap .footer-bottom .policy-nav li:last-child:after {display:none;}
.footer-wrap .footer-bottom .policy-nav li a {color:rgba(255, 255, 255, 0.8);}
.footer-wrap .footer-bottom .policy-nav li:last-child a {color:#fff; font-size:1.34rem}
.footer-wrap .footer-bottom .sns {flex-direction:row; margin-top:2.5rem; gap:1.2rem; font-size:0}
.footer-wrap .footer-bottom .sns li {width:4rem;}


/* 하단 탭바*/
.tab-bar {position:fixed; z-index:100; bottom:-2px; width:100%; height:7rem; border-radius:1rem 1rem 0 0; background:#FFF; filter:drop-shadow(0 0 6.25px rgba(0,0,0,0.2)); -webkit-filter:drop-shadow(0 0 6.25px rgba(0,0,0,0.2)); }
.tab-bar ul {display:flex; justify-content:center; width:100%; height:100%; padding:0 2rem;}
.tab-bar li {position:relative; width:25%; margin:0; color:var(--color-gray, #aaa); font-size:1.1rem; font-weight:600; text-align:center;}
.tab-bar li:before {content:''; display:block; width:4rem; height:4rem; margin:6px auto 3px auto; background-color:#fff; background-repeat:no-repeat; background-position:center center; background-size:3rem 3rem; border-radius:50%; transition:transform .4s}
.tab-bar li:after {content:''; position:absolute; top:0; left:50%; z-index:-1; display:block; width:5.2rem; height:5.2rem; transform:translate(-50%,0); background-color:#fff; border-radius:50%; transition:transform .4s}
.tab-bar li.home:before {background-image:url(../images/tabbar/tabbar_home.svg);}
.tab-bar li.action:before {background-image:url(../images/tabbar/tabbar_implement.svg);}
.tab-bar li.joint:before {background-image:url(../images/tabbar/tabbar_action.svg);}
.tab-bar li.apply:before {background-image:url(../images/tabbar/tabbar_application.svg);}
.tab-bar li.implement:before {background-image:url(../images/tabbar/tabbar_implement.svg);}
.tab-bar li.meeting:before {background-image:url(../images/tabbar/tabbar_meeting.svg);}
.tab-bar li.happygroup:before {background-image:url(../images/tabbar/tabbar_meeting.svg);}
.tab-bar li.myclass:before {background-image:url(../images/tabbar/tabbar_myclass.svg);}
.tab-bar li.mypage:before {background-image:url(../images/tabbar/tabbar_mypage.svg);}
.tab-bar li.exercise:before {background-image:url(../images/tabbar/tabbar_parti.svg);}
.tab-bar li.parti:before {background-image:url(../images/tabbar/tabbar_parti.svg);}
.tab-bar li.performe:before {background-image:url(../images/tabbar/tabbar_performe.svg);}
.tab-bar li.practies:before {background-image:url(../images/tabbar/tabbar_practies.svg);}
.tab-bar li.gift:before {background-image:url(../images/tabbar/tabbar_present.svg);}
.tab-bar li.classreview:before {background-image:url(../images/tabbar/tabbar_review.svg);}
.tab-bar li.review:before {background-image:url(../images/tabbar/tabbar_review.svg);}
.tab-bar li.write:before {background-image:url(../images/tabbar/tabbar_review.svg);}

.tab-bar li.home.active:before {background-image:url(../images/tabbar/tabbar_home_on.svg);}
.tab-bar li.action.active:before {background-image:url(../images/tabbar/tabbar_implement_on.svg);}
.tab-bar li.joint.active:before {background-image:url(../images/tabbar/tabbar_action_on.svg);}
.tab-bar li.apply.active:before {background-image:url(../images/tabbar/tabbar_application_on.svg);}
.tab-bar li.implement.active:before {background-image:url(../images/tabbar/tabbar_implement_on.svg);}
.tab-bar li.meeting.active:before {background-image:url(../images/tabbar/tabbar_meeting_on.svg);}
.tab-bar li.happygroup.active:before {background-image:url(../images/tabbar/tabbar_meeting_on.svg);}
.tab-bar li.myclass.active:before {background-image:url(../images/tabbar/tabbar_myclass_on.svg);}
.tab-bar li.mypage.active:before {background-image:url(../images/tabbar/tabbar_mypage_on.svg);}
.tab-bar li.exercise.active:before {background-image:url(../images/tabbar/tabbar_parti_on.svg);}
.tab-bar li.parti.active:before {background-image:url(../images/tabbar/tabbar_parti_on.svg);}
.tab-bar li.performe.active:before {background-image:url(../images/tabbar/tabbar_performe_on.svg);}
.tab-bar li.practies.active:before {background-image:url(../images/tabbar/tabbar_practies_on.svg);}
.tab-bar li.gift.active:before {background-image:url(../images/tabbar/tabbar_present_on.svg);}
.tab-bar li.classreview.active:before {background-image:url(../images/tabbar/tabbar_review_on.svg);}
.tab-bar li.review.active:before {background-image:url(../images/tabbar/tabbar_review_on.svg);}
.tab-bar li.write.active:before {background-image:url(../images/tabbar/tabbar_review_on.svg);}

.tab-bar li span {display:block; margin-top:-6px}
.tab-bar li.active {color:var(--color-primary, #494E8F);}
.tab-bar li.active:before {background-color:var(--color-primary, #494E8F); transform:translateY(-6px) }
.tab-bar li.active:after {background-color:#fff; transform:translate(-50%, -6px); }


/* 타이틀 */
.section-title {padding:0 1rem; margin-top:-4px; margin-bottom:-4px; font-size:var(--font-big, 1.8rem); color:var(--color-title, #222); font-weight:700; line-height:1.37}
.article-title {padding:0 1rem; margin-top:-4px; margin-bottom:-4px; font-size:var(--font-large, 1.6rem); color:var(--color-title, #222); font-weight:700; line-height:1.46}
.section-title span {display:block; margin-top:0.5rem; font-size:var(--font-size, 1.2rem); font-weight:500; color:var(--color-text, #555);}
.card-title {font-size:var(--font-medium, 1.4rem); font-weight:700; color: var(--color-title, #222);} 
.p-title {padding:0 1rem; margin-top:-2px; margin-bottom:-2px; font-size:var(--font-medium, 1.4rem); color:var(--color-title, #222); font-weight:700; line-height:1.46}
.not.section-title {text-align: center; font-weight: 600 !important;}
.not.section-title > em {font-weight: 800 !important;}

/* tab */
.tab-title {display:flex; align-items:center; gap:1rem; height:3.6rem}
.tab-title li {display:inline-flex; align-items:center; justify-content:center; height:3.6rem; width:100%; color:var(--color-gray, #aaa); border-radius:1.8rem; border:1px solid var(--color-lightgray, #eee); font-weight:600; line-height:0}
.tab-title li.active {color:var(--color-primary, #494E8F); border-color:var(--color-primary, #494E8F); }
.tab-content {display:none; flex-direction:column; gap:3rem;  }
.tab-content.active {display:flex;}

.tab-line {border-top:1px solid var(--color-lightgray, #eee); border-bottom:1px solid var(--color-lightgray, #eee); /*overflow-x:auto;*/ }
.swiper.tab-line .tab-title {justify-content:flex-start;}
.tab-line .tab-title {gap:0; justify-content:center; height:4.3rem; width:100%; }
.tab-line .tab-title li {flex:none; height:4.3rem; width:9rem; margin:0; border:0; border-radius:0; font-size:1.4rem; border-bottom:2.5px solid transparent;}
.tab-line .tab-title li.active {border-color:var(--color-point, #F97173); color:var(--color-point, #F97173); font-weight:800;}
.tab-line ~ .tab-content {padding:3rem 2rem 0 2rem; gap:0}
.tab-line ~ .tab-content .article-title {padding:0; margin-bottom:1.6rem; text-align:left; font-weight:700;}
.tab-line ~ .tab-content .article-title em.color-red {display:inline-flex; margin-left:3px}


/* 리스트 */
.common-list {display:flex; flex-direction:column; gap:3rem; margin-top:4rem}
.section-list {display:flex; flex-direction:column; gap:4rem;}
.detail-list {display:flex; flex-direction:column; gap:6rem;}
.detail-header {display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; padding-bottom:2rem; border-bottom:1px solid var(--color-lightgray, #eee);}
.detail-header .etc-text {padding:0 1rem; color:var(--color-gray, #aaa);} 
.detail-list .box-drop {padding:0}

.frm-group {display:flex; flex-direction:column; gap:1.2rem; margin-top:2rem}
div[class*='-list'] + .btn-group {margin-top:4rem}

.list-wrap {display:flex; flex-direction:column;}
.list-wrap li {display:flex; align-items:center; justify-content:space-between; height:4.8rem; margin:0; padding:0 2rem; border-bottom:1px solid var(--color-lightgray, #eee); font-size:var(--font-medium, 1.4rem); font-weight:700; color:var(--color-title, #222)}
.list-wrap li .value {color:var(--color-gray, #aaa); font-weight:600; font-size:var(--font-size, 1.2rem);}
.list-wrap li .right {display:flex; align-items:center; gap:0.8rem}

.input-list {display:flex; flex-direction:column; gap:1.6rem; margin-top:2.5rem;} 
.input-list li {padding-left:0.8rem; padding-right:0.8rem; margin-top:0;}
.input-list li .radiobox em {font-size:var(--font-medium, 1.4rem);}

/* 게시판 */
em.category {display:inline-flex; align-items:center; height:2.2rem; padding:0 1rem; line-height:0; font-size:var(--font-size, 1.2rem); color:var(--color-primary, #494E8F); border:1px solid var(--color-primary, #494E8F); border-radius:1.1rem}
.date {display:inline-flex; align-items:center; font-size:var(--font-size, 1.2rem); font-weight:500; color:var(--color-gray, #aaa)}
.board-list {border-top:1.5px solid #000}
.board-list li {position:relative; padding:2rem 4rem 2rem 1rem; font-size:var(--font-medium, 1.4rem); border-bottom:1px solid var(--color-lightgray, #eee); font-weight:700; color:var(--color-title, #222)}
.board-list li:after {content:''; position:absolute; top:50%; right:1rem; display:block; width:2rem; height:2rem; background:url(../images/ico_arrow.svg) no-repeat 0 0 / 100% 100%; transform:rotate(0deg) translate(0, -50%);}
.board-list li em.ing {display:inline-flex; align-items:center; height:2.2rem; padding:0 1rem; margin-bottom:0.8rem; line-height:0; font-size:var(--font-size, 1.2rem); color:var(--color-primary, #494E8F); border:1px solid var(--color-primary, #494E8F); border-radius:1.1rem}
.board-list li em.category, .board-list dt em.category {margin-bottom:0.8rem;}
.board-list li em.pending {display:inline-flex; align-items:center; height:2.2rem; padding:0 1rem; margin-bottom:0.8rem; line-height:0; font-size:var(--font-size, 1.2rem); color:var(--color-gray, #aaa); border:1px solid var(--color-gray, #aaa); border-radius:1.1rem}
.board-list li em.answer {display:inline-flex; align-items:center; height:2.2rem; padding:0 1rem; margin-bottom:0.8rem; line-height:0; font-size:var(--font-size, 1.2rem); color:var(--color-point, #F97173); border:1px solid var(--color-point, #F97173); border-radius:1.1rem}
.board-list .etc-info {display:flex; align-items:center; margin-top:8px}
.board-list li span {margin:0}
.board-list li .date::after {content:''; display:block; width:1px; height:1.2rem; margin:0 8px; background-color:#555; opacity:.5}
.board-list li .view {display:inline-flex; align-items:center; gap:2px; font-size:var(--font-size, 1.2rem); font-weight:500; color:var(--color-gray, #aaa)}
.board-list li .view:before {content:''; display:block; width:1.4rem; height:1.4rem; margin:0; margin-top:-1px; background:url("../images/ico_eye_small.svg") no-repeat 0 0 / cover;}
.board-list li.end {color:var(--color-gray, #aaa); }
.board-list li.end em.ing {color:var(--color-gray, #aaa); border-color:var(--color-gray, #aaa);}
.board-list + .btn-group {margin:3rem 0}

.board-list.faq {margin-left:-2rem; margin-right:-2rem; border-top:1px solid var(--color-lightgray, #eee)}
.board-list dt {position:relative; padding:2.2rem 9rem 1.5rem 3rem; font-size:var(--font-medium, 1.4rem); border-bottom:1px solid var(--color-lightgray, #eee); font-weight:700; color:var(--color-title, #222);}
.board-list dt:after {content:''; position:absolute; top:50%; right:3rem; display:block; width:1.2rem; height:0.7rem; background:url(../images/ico_arrow_medium_b.svg) no-repeat 0 0 / 100% 100%; transform:rotate(180deg) translate(0, -50%); transition:.2s;}
.board-list dd {display:flex; flex-direction:column; gap:0; max-height:0; height:0; padding:0 3rem; border-bottom:1px solid var(--color-lightgray, #eee); background-color:#F9F9F9; color:var(--color-title, #222); line-height:1.4; overflow:hidden; visibility:hidden; opacity:0; transition:max-height .6s}
.board-list dd p {margin:0;}
.board-list > dl.active dt:after {transform:rotate(0deg);}
.board-list > dl.active dd {max-height:800rem; height:auto; padding:2rem 3rem; visibility:visible; opacity:1;}
.search-wrap .board-list li > div {display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:keep-all;}
.board-list.faq dt > div {display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:3; -webkit-box-orient:vertical; word-break:keep-all;}


.board-detail {margin:4rem 2rem 6rem 2rem; padding:0; border-top:1.5px solid #000; }
.board-detail .board-detail-header {padding:3rem 1rem; text-align:center;}
.board-detail .board-detail-header .section-title {margin-bottom:6px; font-weight:800; }
.board-detail .board-detail-header .board-etc-info {justify-content:center; margin-top:1.6rem; }
.board-detail .board-detail-body {padding:3rem 0rem; border-top:1px solid var(--color-lightgray, #eee); border-bottom:1px solid var(--color-lightgray, #eee); text-align:justify; color:var(--color-title, #222)}
.board-detail .board-detail-body figure {margin-bottom:2rem; line-height:0;}
.board-detail .board-detail-body .big-title {font-size:1.8rem; font-weight:800;}
.board-detail .board-detail-body .small-title {font-size:1.4rem; font-weight:700;}
.board-detail .board-detail-body .small-text {font-size:1rem; font-weight:500;}
.board-detail .board-detail-body .bold {font-weight:700;}
.board-detail .board-detail-body p {margin-bottom:0.8rem; color:var(--color-title, #222)}
.board-detail .board-detail-body a {text-decoration:underline; font-weight:600;}
.board-detail .btn-group {margin-top:4rem}

.board-etc-info {display:flex; align-items:center; gap:7px; }
.board-etc-info li {display:inline-flex; align-items:center; height:1.4rem; color:var(--color-gray, #aaa)}
.board-etc-info li:not(:last-child):after {content:''; display:block; width:1px; height:1.2rem; margin-left:8px; background-color:rgba(85,85,85,.5);}
.board-etc-info li.reply:before {content:''; display:block; width:1.4rem; height:1.4rem; background:url(../images/ico_replay.svg) no-repeat 0 0 / 100%;}
.board-etc-info li.view:before {content:''; display:block; width:1.4rem; height:1.4rem; margin-right:2px; background:url(../images/ico_eye_small.svg) no-repeat 0 0 / 100%;}


/* 테이블형 목록 */
.tbl-list, .tblRow-list {border-top:1px solid #767676; color:#333; }
.tbl-list .row.title {padding:1rem; background-color:#F9F9F9; font-weight:700;}
.tbl-list .row:first-child {border-bottom:0}
.tbl-list .row {width:100%; padding:1.2rem 1rem; border-bottom:1px solid #ddd;}
.tbl-list .row p {text-align:center;}
.tbl-list .row.disable {color:#aaa;}
.tbl-list .row.disable p.btn a.btn-text {color:#aaa; pointer-events: none;}
.tbl-list .row button {width:5.3rem; margin:auto}

.tbl-list.col {color:var(--color-title, #222)}
.tbl-list.col .row {position:relative; align-items:stretch; padding:0; gap:0;}
.tbl-list.col .row:first-child {border-bottom:1px solid #ddd;}
.tbl-list.col .row .title {background-color:#F9F9F9; font-weight:700;}
.tbl-list.col .row p {width:100%; padding:1rem 1rem; margin:0; text-align:left;}

/* place-list */
.place-list {display:flex; flex-direction:column; gap:0.8rem; }
.place-list li span {display:inline-flex; width:calc(100% - 3.9rem)}
.place-list li span:first-child {width:3.6rem}


/* 박스형 목록*/
.box-list {display:flex; flex-direction:column; }
.box-drop {padding:3rem 2rem; background-color:#fff;} /* 바깥여백없는 박스 */
.box-drop .box-drop-head {display:flex; align-items:center; justify-content:space-between;}
.box-drop .box-drop-head .btn-text {color:var(--color-point, #F97173); }
.box-drop .article-title {margin-bottom:-4px !important}
.box-drop .article-title.end {color:#aaa}
.box-drop .etc-text {margin-top:0.4rem; padding-left:1rem; color:var(--color-gray, #aaa)}
.box-drop .strong {margin-top:1rem; font-weight:600; color:var(--color-title, #222); }
.box-drop .hard-strong {display:inline-block; margin-bottom:3px; font-weight:800; color:var(--color-point, #F97173); }
.box-drop .dt {font-weight:600; color:var(--color-title, #222);}
.box-drop .gray-box {margin-bottom:0;}
.box-drop .gray-box + .btn-group {margin-top:2rem}

.gray-box {margin:1.6rem 0 2rem 0; padding:2rem; border-radius:1rem; background-color:#f8f8f8;}
.gray-box-head {display:flex; justify-content:space-between; gap:3rem; margin-bottom:1.2rem}
.gray-box-head button {flex:none}
.gray-box-head .btn-text {flex:none; }
.gray-box .article-title {padding:0; color:var(--color-primary, #494E8F)}
.gray-box .article-title.color-black {color:#333}
.gray-box dl {position:relative; display:flex; align-items:center; justify-content:space-between;}
.gray-box dt {font-weight:600; color:var(--color-title, #222); }
.gray-box dd {color:#666; text-align:right;}

.darkGray-box {padding:1.7rem 2rem; border:1px solid #ddd; background-color:var(--color-lightgray, #eee); border-radius:1rem; font-weight:700; color:var(--color-title, #222); text-align:center;}

.gray-detail-box {display:flex; flex-direction:column; gap:1.1rem; padding:2.3rem 2rem; border:0.5px solid var(--color-lightgray, #eee); background-color:#F9F9F9;}
.gray-detail-box dd {color:var(--color-text, #555);}
.box-drop:last-child .gray-detail-box {margin-bottom:0}

.article-title.use, .article-title.cancel, .article-title.use, .article-title.end {color:#666}
.article-title.expiration {color:var(--color-point, #F97173)}

/* 상단 회색박스 */
.gray-header {padding:4rem 2rem 2rem 2rem; background-color:#F9F9F9; box-shadow:inset 0px -3px 15px 0px rgba(0, 0, 0, 0.02);}
.gray-header .dropdown {width:13.5rem}

/* 하단 안내박스 */
.guide-check {display:flex; flex-direction:column; gap:1.4rem; width:100%; margin-top:2rem; padding:2rem; color:#222; font-weight:600; background-color:#f8f8fb; border-radius:1rem}
.guide-check li {display:flex; word-break:keep-all;}
.guide-check li:before {content:''; display:block; flex:none; width:1.2rem; height:1.2rem; margin-top:0.1rem; margin-right:0.8rem; background:url(../images/ico_check.svg) 0 0 / cover;}

/* 그림자있는 카드 */
.card-drop-box {border:1.5px solid var(--color-lightgray, #eee); border-radius:1.6rem; box-shadow:0px 3px 15px 0px rgba(0, 0, 0, 0.06);}
.card-drop-box .card-drop-header {padding:2.5rem 1.8rem; background-color:#f9f9f9; border:1px solid #F5F5F5; border-radius:1.6rem 1.6rem 0 0;}
.card-drop-box .card-drop-title {display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem}
.card-drop-box .card-drop-header .article-title {padding:0; color:var(--color-primary, #494E8F)}
.card-drop-box .card-drop-header .status, .board-list .status  {height:2.2rem; line-height:2.2rem; padding:0 0.8rem; margin:0; color:var(--color-text, #555); font-weight:700; border:1px solid var(--color-text, #555); border-radius:1.1rem}
.card-drop-box .card-drop-header .status.ing, .board-list .status.ing {color:var(--color-point, #F97173); border-color:var(--color-point, #F97173);}
.card-drop-box .card-drop-header .status.non, .board-list .status.non {color:var(--color-gray, #aaa); border-color:var(--color-gray, #aaa); }
.card-drop-box .card-drop-header .status.train, .board-list .status.train {color:var(--color-primary, #494E8F); border-color:var(--color-primary, #494E8F); }
.card-drop-box .card-drop-header .status.education, .board-list .status.education {color:#B071AE; border-color:#B071AE; }
.card-drop-box .card-drop-header .status.event, .board-list .status.event {color:#BA805E; border-color:#BA805E; }
.card-drop-box .card-drop-header p {color:var(--color-title, #222);}
.card-drop-box .card-drop-body .ot {padding:3rem 2rem;}
.card-drop-box .card-drop-body .section-title, .card-drop-box .card-drop-body .article-title, .card-drop-box .card-drop-body p {padding:0 0.4rem;}
.card-drop-box .card-drop-body p {padding-top:1.4rem; padding-bottom:2rem;}
.card-drop-box figure {line-height:0}
.card-drop-box .card-drop-body .btn-group {margin-top:2rem}

.card-drop-box .tab-title {width:calc(100% - 2rem); margin:0 1rem}
.card-drop-box .tab-title li {width:33.33%}
.card-drop-box .tab-content {padding:0}
.card-drop-box .tab-content > .btn-group {margin-bottom:3rem}
.card-drop-box .my-lecture {padding-bottom:2.5rem}
.card-drop-box .my-lecture figure {flex:none; width:8rem;}
.card-drop-box .my-lecture .lecture-content {display:flex; align-items:center; gap:1.4rem; padding:2.5rem 2rem 0 2rem;}
.card-drop-box .my-lecture .lecture-content + .btn-group {margin-top:1rem}
.card-drop-box .my-lecture .lecture-content + .btn-group button {width:calc(50% - 2rem)}
.card-drop-box .my-lecture .lecture-content .section-title {padding:0; color:var(--color-primary, #494E8F);}
.card-drop-box .my-lecture .lecture-content p {padding:8px 0 4px 0;}
.card-drop-box .my-lecture .lecture-content .btn-text {display:block; padding-top:4px;}

.card-drop-box .participation {padding:2.7rem 1rem 2.5rem; background-color:#FBF7F5;}
.card-drop-box .participation-header {display:flex; align-items:center; justify-content:space-between; margin:0 1rem; padding-bottom:1.4rem; border-bottom:1px solid #F4E8E3}
.card-drop-box .participation-header .article-title {margin-bottom:0; padding:0}
.card-drop-box .legend-group {display:flex; align-items:center; gap:3px}
.card-drop-box .legend-group em {display:flex; align-items:center; gap:4px; height:2rem; padding:0 1rem; border-radius:1rem; background-color:#fff; font-size:1rem; font-weight:700;}
.card-drop-box .legend-group em:before {content:''; width:5px; height:5px; border-radius:1px;}
.card-drop-box .legend-exercise {color:#FFA069}
.card-drop-box .legend-exercise:before {background-color:var(--color-exercise, #FFB589)}
.card-drop-box .legend-practice {color:var(--color-practice, #9ECC74)}
.card-drop-box .legend-practice:before {background-color:var(--color-practice, #9ECC74);}
.card-drop-box .legend-action {color:#FBAD18}
.card-drop-box .legend-action:before {background-color:#FBAD18;}
.card-drop-box .legend-performe {color:var(--color-point, #F97173)}
.card-drop-box .legend-group .legend-performe:before {width:1rem; height:1rem; background:url(../images/bg_perform.svg) no-repeat 0 0 / 1rem 1rem ;}
.card-drop-box .calendar {margin-top:1.6rem}
.card-drop-box .calendar ul {display:flex; gap:8px; width:100%;}
.card-drop-box .calendar .week {margin-top:1.2rem}
.card-drop-box .calendar li {flex:none; width:calc(14.2857% - 6.9px); text-align:center; color:#D5A99B; font-size:1rem; font-weight:700; }
.card-drop-box .calendar .week li {margin:0; font-size:var(--font-size, 1.2rem); font-weight:800; }
.card-drop-box .calendar .week em {display:inline-flex; align-items:center; justify-content:center; width:3rem; height:3rem; margin:0}
.card-drop-box .calendar .week em.past {background:url(../images/bg_day.svg) no-repeat center / cover; color:#D5A99B}
.card-drop-box .calendar .week em.today {background:url(../images/bg_day_on.svg) no-repeat center / cover; color:#fff}
.card-drop-box .calendar .week em.performe {background:url(../images/bg_day_performe.svg) no-repeat center / cover; }
.card-drop-box .calendar .week .class {display:flex; align-items:center; justify-content:center; gap:4px; margin:0; margin-top:6px;}
.card-drop-box .calendar .week .class i {display:block; width:5px; height:5px; border-radius:1px;}
.card-drop-box .calendar i.exercise {background-color: var(--color-exercise, #FFB589);}
.card-drop-box .calendar i.practice {background-color: var(--color-practice, #9ECC74);}
.card-drop-box .calendar i.action {background-color:#FBAD18;}

.card-drop-box .bann li {display:flex; align-items:center; justify-content:space-between; padding:2rem; border-bottom:1px solid #F5F5F5}
.card-drop-box .bann li .article-title, .bann-wrap .bann li .article-title {margin:5px 0 4px; padding:0 4px; }
.card-drop-box .bann li em, .bann-wrap .bann li em {display:inline-flex; align-items:center; height:2.2rem; margin:0; padding:0 0.8rem; border-radius:1.1rem; font-weight:700; line-height:0}
.card-drop-box .bann li p, .bann-wrap .bann li p {padding:0 4px; word-break: break-all;}
.legend-exercise {color:var(--color-exercise, #FFB589);}
.bann .legend-exercise {border:1px solid var(--color-exercise, #FFB589)}
.legend-practice {color:var(--color-practice, #9ECC74);}
.bann .legend-practice {border:1px solid var(--color-practice, #9ECC74)}
.legend-public {color:var(--color-public, #D5A99B); }
.bann .legend-public {border:1px solid var(--color-public, #D5A99B)}


/* 카드형 목록 */
.card-list {display:flex; flex-direction:column; gap:1.6rem; padding-top:0 }
.card-list .section-title {margin-bottom:4px}
.card {position:relative; width:100%; border-radius:1.2rem; border:1.5px solid #ddd; text-align:left; overflow:hidden;}
.no-wave .card .card-header, .card .card-header {position:relative; display:flex; align-items:center; gap:1.2rem; padding:1.8rem 2rem 2rem; background-color:var(--color-lightgray, #eee); border-radius:1.1rem 1.1rem 0 0}
.action-introduce .card .card-header:before, .action-introduce .card:not(.action) .card-header:after,
.no-wave .card .card-header:before, .no-wave .card:not(.action) .card-header:after {display: none;}
.card:not(.action) .card-header {padding:2.4rem 2rem 2.5rem}
.card:not(.action) .card-header::before {content:''; position:absolute; top:0; left:0; width:100%; height:2.5rem; mix-blend-mode:multiply;
	background:linear-gradient(-90deg, rgba(66,66,66,0.05) 0%, rgba(66,66,66,0) 100%);
	background:-o-linear-gradient(-90deg, rgba(66,66,66,0.05) 0%, rgba(66,66,66,0) 100%);
	background:-moz-linear-gradient(-90deg, rgba(66,66,66,0.05) 0%, rgba(66,66,66,0) 100%);
	background:-webkit-linear-gradient(-90deg, rgba(66,66,66,0.05) 0%, rgba(66,66,66,0) 100%);
}
.card:not(.action) .card-header::after {content:''; position:absolute; left:-4px; bottom:-1px; display:block; width:calc(100% + 8px); height:5vw; background: url(/images/mask_card.svg) no-repeat 0 0 / cover;}
.card .card-header .profile {width:5rem; height:5rem; border-radius:50%; border:0px solid #ddd; overflow:hidden;}
.card .card-header .p-title {padding:0}
.card .card-header .tag-wrap {margin-top:0.8rem;}
.card .card-header .tag {border-width:0.5px;}
.card .card-header .btn-more {position:absolute; top:2rem; right:2rem; }
.card .card-header .btn-more .btn-card-more {width:2.1rem; height:1rem; padding-bottom:3rem; background:url(../images/btn_more.svg) no-repeat 0 0 / 2.1rem 1rem; font-size:0; border:0}
.card .card-header .btn-more .card-more-menu {position:absolute; right:0; top:1.4rem; z-index:3; max-height:0; padding:4px; border:1px solid var(--color-lightgray, #eee); border-radius:1rem; box-shadow:0px 1px 8px 0px rgba(0, 0, 0, 0.06); background-color:#fff; opacity:0; visibility:hidden; overflow: hidden; transition:max-height .5s}
.card .card-header .btn-more .card-more-menu.show {max-height:300px; opacity:1; visibility:visible;}
.card .card-header .btn-more .card-more-menu li {height:3.2rem; padding:0.7rem 1.2rem; font-weight:600; color:var(--color-gray, #aaa); background-color:transparent; border-radius:5px; white-space:nowrap;}
.card .card-header .btn-more .card-more-menu li.active {color:var(--color-title, #222); font-weight:700; background-color:var(--color-lightgray, #eee);}

.card .card-body {padding:1.2rem 2rem 1.8rem; background-color:#fff; border-radius:0 0 1.2rem 1.2rem;}
.card:not(.action) .card-body {padding:1.6rem 2rem 1.8rem}
.card .card-body .p-title {padding:0}
.card .card-body .body-text {display:-webkit-box; margin-top:4px; color:var(--color-title, #222); overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:4; -webkit-box-orient:vertical; white-space:pre-line;  word-break: break-all; height: calc(4*1.5em); line-height: 1.5em; }
.card .card-body .btn-text {display:inline-block; padding:1.2rem 0;}
/* .card .card-body .date {display:block; margin-top:0.4rem} */
.card .card-body .card-share {display:flex; align-items:center; justify-content:space-between; margin-top:1.2rem; max-height:3.6rem;}
.card .card-body .sympathy {display:flex; align-items:center;}
.card .card-body .sympathy li {display:inline-flex; align-items:center; width:2rem; height:2rem; font-size:1rem; color:var(--color-gray, #aaa);}
.card .card-body .sympathy li i {display:block; width:2rem; height:2rem; font-size:0}
.card .card-body .sympathy li.heart i {background:url(../images/ico_love.svg) no-repeat 0 0 / 100%;}
.card .card-body .sympathy li.like i {background:url(../images/ico_like.svg) no-repeat 0 0 / 100%;}
.card .card-body .sympathy li.smile i {background:url(../images/ico_miso.svg) no-repeat 0 0 / 100%;}
.card .card-body .sympathy li.sad i {background:url(../images/ico_sad.svg) no-repeat 0 0 / 100%;}
.card .card-body .sympathy li.count {padding-left:3px}
.card .card-body .share {display:flex; align-items:center; gap:8px}
.card .card-body .btn-like {position:relative}
.card .card-body button.btn-heart {height:3.6rem; width:3.6rem; background:url(../images/btn_heart.svg) no-repeat 0 0 / 100%; font-size:0; border:0}
.card .card-body button.clicked-heart {height:3.6rem; width:3.6rem; background:url(../images/btn_heart_on.svg) no-repeat 0 0 / 100%;  font-size:0; border:0}
.card .card-body button.clicked-like {height:3.6rem; width:3.6rem; background:url(../images/btn_like_on.svg) no-repeat 0 0 / 100%;  font-size:0; border:0}
.card .card-body button.clicked-smile {height:3.6rem; width:3.6rem; background:url(../images/btn_smile_on.svg) no-repeat 0 0 / 100%;  font-size:0; border:0}
.card .card-body button.clicked-sad {height:3.6rem; width:3.6rem; background:url(../images/btn_sad_on.svg) no-repeat 0 0 / 100%;  font-size:0; border:0}
.card .card-body button.btn-share, button.btn-share {height:3.6rem; width:3.6rem; background:url(../images/btn_share.svg) no-repeat 0 0 / 100%; font-size:0; border:0}
.card .card-body .btn-like ul {position:absolute; right:-3rem; bottom:5rem; display:flex; align-items:center; gap:5px; padding:8px; border-radius:1rem; background-color:#fff; filter:drop-shadow(0px 1px 8px rgba(0, 0, 0, 0.06)); -webkit-filter:drop-shadow(0px 1px 8px rgba(0, 0, 0, 0.06));opacity:0; visibility:hidden;}
.card .card-body .btn-like ul:before {content:''; position:absolute; bottom:-7px; right:4.3rem; display:block; width:1rem; height:0.7rem; background:url(../images/bg_tooltip.svg) no-repeat 0 0 / cover; filter:drop-shadow(0px 1px 8px rgba(0, 0, 0, 0.06)); -webkit-filter:drop-shadow(0px 1px 8px rgba(0, 0, 0, 0.06));}
.card .card-body .btn-like ul.show {opacity:1; visibility:visible;}
.card .card-body .btn-like ul li {width:3rem; height:3rem;}
.card .card-body .btn-like ul li i {display:block; width:3rem; height:3rem; font-size:0}
.card .card-body .btn-like ul li.heart i {background:url(../images/btn_love.svg) no-repeat 0 0 / 100%;}
.card .card-body .btn-like ul li.like i {background:url(../images/btn_like.svg) no-repeat 0 0 / 100%;}
.card .card-body .btn-like ul li.smile i {background:url(../images/btn_smile.svg) no-repeat 0 0 / 100%;}
.card .card-body .btn-like ul li.sad i {background:url(../images/btn_sad.svg) no-repeat 0 0 / 100%;}
.card .card-body .heart-count {color:#aaa}
/* .popup .card .card-body .card-share {align-items:flex-end; margin-top:0; } */
.popup .card .card-body .sympathy li {width:2.4rem; height:2.4rem; font-size:1.4rem; font-weight:600}
.popup .card .card-body .sympathy li i {width:2.4rem; height:2.4rem;}

.card.exercise {border-color:#C9BCB1} /* 행복연습*/
.card.exercise .card-header {background-color:#C9BCB1; color:#69625C}
.card.exercise .card-header .tag, .card.exercise .card-header .p-title {color:#69625C; border-color:#69625C}
/* .card.exercise .card-header .profile {border-color:#FFB589}*/
.card.exercise .card-body .sympathy li i {filter:invert(100%) sepia(82%) saturate(3178%) hue-rotate(299deg) brightness(101%) contrast(100%); -webkit-filter:invert(100%) sepia(82%) saturate(3178%) hue-rotate(299deg) brightness(101%) contrast(100%);} 

.card.practice {border-color:#C8DDB4} /* 행복실천*/
.card.practice .card-header {background-color:#C8DDB4; color:#5D7645}
.card.practice .card-header .tag, .card.practice .card-header .p-title {border-color:#5D7645; color:#5D7645}
/* .card.practice .card-header .profile {border-color:#9ECC74}*/
.card.practice .card-body .sympathy li i {filter:invert(100%) sepia(18%) saturate(5642%) hue-rotate(28deg) brightness(93%) contrast(68%); -webkit-filter:invert(100%) sepia(18%) saturate(5642%) hue-rotate(28deg) brightness(93%) contrast(68%);} 

.card.action {border-color:#F1D8CF} /* 공동행동*/
.card.action .card-header {background-color:#F7E9E4;}
.card.action .card-header .profile {border-color:#D5A99B}
.card.action .card-body .sympathy li i {filter:invert(80%) sepia(4%) saturate(3331%) hue-rotate(322deg) brightness(101%) contrast(67%); -webkit-filter:invert(80%) sepia(4%) saturate(3331%) hue-rotate(322deg) brightness(101%) contrast(67%);}
.card.action .card-body {padding:1.8rem 2rem}

.card.color01, .card.color1 {border-color:var(--choice-color01, #FFEBE6)} /* 수업후기 color1 ~ color8 */
.card.color01 .card-header, .card.color1 .card-header {background-color:var(--choice-color01, #FFEBE6)}
/* .card.color01 .card-header .profile, .card.color1 .card-header .profile {border-color:#FFB7BE} */
.card.color01 .card-header .tag, .card.color01 .card-header .p-title {color:#B5604A; border-color:#B5604A}
.card.color01 .card-body .sympathy li i, .card.color1 .card-body .sympathy li i {filter: invert(90%) sepia(74%) saturate(1340%) hue-rotate(287deg) brightness(105%) contrast(102%); -webkit-filter: invert(90%) sepia(74%) saturate(1340%) hue-rotate(287deg) brightness(105%) contrast(102%);}

.card.color02, .card.color2 {border-color:var(--choice-color02, #EEEFF8)}
.card.color02 .card-header, .card.color2 .card-header {background-color:var(--choice-color02, #EEEFF8)}
/* .card.color02 .card-header .profile, .card.color2 .card-header .profile {border-color:#FFDB88} */
.card.color02 .card-header .tag, .card.color02 .card-header .p-title {color:#4F5587; border-color:#4F5587;}
.card.color02 .card-body .sympathy li i, .card.color2 .card-body .sympathy li i {filter: invert(92%) sepia(10%) saturate(7484%) hue-rotate(310deg) brightness(124%) contrast(120%); -webkit-filter: invert(92%) sepia(10%) saturate(7484%) hue-rotate(310deg) brightness(124%) contrast(120%);}

.card.color03, .card.color3 {border-color:var(--choice-color03, #F0E7F5)}
.card.color03 .card-header, .card.color3 .card-header {background-color:var(--choice-color03, #F0E7F5)}
/* .card.color03 .card-header .profile, .card.color3 .card-header .profile {border-color:#88D1F0} */
.card.color03 .card-header .tag, .card.color03 .card-header .p-title {color:#7D568F; border-color:#7D568F;}
.card.color03 .card-body .sympathy li i, .card.color3 .card-body .sympathy li i {filter: invert(75%) sepia(55%) saturate(465%) hue-rotate(168deg) brightness(100%) contrast(89%); -webkit-filter: invert(75%) sepia(55%) saturate(465%) hue-rotate(168deg) brightness(100%) contrast(89%);}

.card.color04, .card.color4 {border-color:var(--choice-color04, #EEE7DB)}
.card.color04 .card-header, .card.color4 .card-header {background-color:var(--choice-color04, #EEE7DB)}
.card.color04 .card-header .profile, .card.color4 .card-header .profile {border-color:#DFC9A3}
.card.color04 .card-body .sympathy li i, .card.color4 .card-body .sympathy li i {filter: invert(86%) sepia(31%) saturate(309%) hue-rotate(349deg) brightness(93%) contrast(88%); -webkit-filter: invert(86%) sepia(31%) saturate(309%) hue-rotate(349deg) brightness(93%) contrast(88%);}

.card.color05, .card.color5 {border-color:var(--choice-color05, #FFE1D2)}
.card.color05 .card-header, .card.color5 .card-header {background-color:var(--choice-color05, #FFE1D2)}
.card.color05 .card-header .profile, .card.color5 .card-header .profile {border-color:#FFC6AA}
.card.color05 .card-body .sympathy li i, .card.color5 .card-body .sympathy li i {filter: invert(80%) sepia(40%) saturate(524%) hue-rotate(315deg) brightness(103%) contrast(103%); -webkit-filter: invert(80%) sepia(40%) saturate(524%) hue-rotate(315deg) brightness(103%) contrast(103%);}

.card.color06, .card.color6 {border-color:var(--choice-color06, #DDF1BF)}
.card.color06 .card-header, .card.color6 .card-header {background-color:var(--choice-color06, #DDF1BF)}
.card.color06 .card-header .profile, .card.color6 .card-header .profile {border-color:#BCDE8A}
.card.color06 .card-body .sympathy li i, .card.color6 .card-body .sympathy li i {filter: invert(85%) sepia(13%) saturate(1005%) hue-rotate(40deg) brightness(98%) contrast(91%); -webkit-filter: invert(85%) sepia(13%) saturate(1005%) hue-rotate(40deg) brightness(98%) contrast(91%);}

.card.color07, .card.color7 {border-color:var(--choice-color07, #E5D6F9)}
.card.color07 .card-header, .card.color7 .card-header {background-color:var(--choice-color07, #E5D6F9)}
.card.color07 .card-header .profile, .card.color7 .card-header .profile {border-color:#C1A9E1}
.card.color07 .card-body .sympathy li i, .card.color7 .card-body .sympathy li i {filter: invert(70%) sepia(24%) saturate(444%) hue-rotate(224deg) brightness(101%) contrast(82%); -webkit-filter: invert(70%) sepia(24%) saturate(444%) hue-rotate(224deg) brightness(101%) contrast(82%);}

.card.color08, .card.color8 {border-color:var(--choice-color08, #DDDDDD)}
.card.color08 .card-header, .card.color8 .card-header {background-color:var(--choice-color08, #DDDDDD)}
.card.color08 .card-header .profile, .card.color8 .card-header .profile {border-color:#BBBBBB}
.card.color08 .card-body .sympathy li i, .card.color8 .card-body .sympathy li i, .card .card-body .sympathy li i
 {filter: invert(63%) sepia(99%) saturate(1%) hue-rotate(19deg) brightness(98%) contrast(95%); -webkit-filter: invert(63%) sepia(99%) saturate(1%) hue-rotate(19deg) brightness(98%) contrast(95%);}

.simple-card {display:flex; flex-direction:column; gap:0.8rem; padding:1.6rem; border:1px solid var(--color-lightgray, #eee); border-radius:1.6rem; background-color:#fff; color:var(--color-title, #222)}
.simple-card .strong {font-weight:700;}
i.star {display:block; width:1.6rem; height:1.6rem; background:url(../images/ico_star.svg) no-repeat 0 0 / 100%;}

/* 진행표시 바 */
.progress-wrap {position:relative; z-index:1; padding-top:9.4rem;}
.progress-wrap .progress-bg {position:relative; display:block; height:1.6rem; width:100%; background-color:#F7E9E4; border-radius:0.8rem; overflow:hidden;}
.progress-wrap .progress-bar {position:absolute; bottom:2px; left:0; height:1.6rem; width:24%; background-color:#D5A99B; border-radius:0.8rem; }
.progress-wrap .progress-bar.ani {opacity:1; transform:translateY(0); transition-delay:0; transition:none}
.progress-wrap .progress-bar.animate {animation:progress 1.6s ease-in-out forwards}
/* .progress-wrap .progress-bar:after {content:''; position:absolute; right:-2.2rem; bottom:8px; display:block; width:6rem; height:6rem; background:url(../images/sticker/progressbar.svg) no-repeat 0 0 / 100%} */
.progress-wrap .progress-bar.exceeds-100:after {right: 0;}
.progress-wrap > .character {position:absolute; z-index: 1; top:3rem; left:calc(24% - 9rem); display:flex; width:10rem; height:7.2rem; padding:0 }
.progress-wrap > .character i {flex:none; display:block; align-self: flex-end; width:6rem}
.progress-wrap .percent {position:relative; flex:none; display:flex; align-items:center; justify-content:center; width:4.5rem; height:4.5rem; border-radius:50%; background-color:#D5A99B; font-size:var(--font-size, 1.2rem); font-weight:800; color:#fff}
.progress-wrap .percent:before {content:''; position:absolute; bottom:2px; right:2px; display:block; width:0; height:0; border-bottom:9px solid #D5A99B; border-left:5px solid transparent; border-right:7px solid transparent; transform:rotate(25deg)}
.progress-wrap .percent em {font-size:var(--font-big, 1.8rem); font-weight:800; color:#fff}

.progress-wrap .main-progress-bg {position:relative; height:6.5rem; }
.progress-wrap .main-progress-bg i {position:absolute; bottom:0.2rem; left:0; z-index:1; display:block; width:6rem; height:6rem; }
.progress-wrap .main-progressbar-back {position:relative; left:0; top:5.5rem; display:block; height:0.8rem; width:100%; background-color:#F7E9E4; border-radius:0.8rem; overflow:hidden;}
.progress-wrap .main-progress-bar {position:absolute; bottom:2px; left:0; height:0.8rem; width:80%; background-color:#D5A99B; border-radius:0.8rem; }
.progress-wrap .main-progress-bar.ani {opacity:1; transform:translateY(0); transition-delay:0; transition:none}
.progress-wrap .main-progress-bar.animate {animation:progress 1.6s ease-in-out forwards}
/* .progress-wrap .main-progress-bar:after {content:''; position:absolute; right:-2.2rem; bottom:0px; display:block; width:6rem; height:6rem; background:url(../images/sticker/progressbar.svg) no-repeat 0 0 / 100%} */
.progress-wrap .main-progress-bar.exceeds-100:after {content:''; position:absolute; right:0; bottom:8px; display:block; width:6rem; height:6rem; background:url(../images/sticker/progressbar.svg) no-repeat 0 0 / 100%}
.progress-wrap .main-progress-bar .percent {display: none}
.progress-wrap .main-progress-bar .percent:before {content:''; position:absolute; bottom:2px; right:2px; display:block; width:0; height:0; border-bottom:9px solid #D5A99B; border-left:5px solid transparent; border-right:7px solid transparent; transform:rotate(25deg)}
.progress-wrap .main-progress-bar .percent em {display: none}
.progress-wrap .target {margin-top:0.8rem; font-weight:600; color:var(--color-gray, #aaa); text-align:right;}
@keyframes progress {
    0% {transform:translateX(-100%)}
    100% {transform:translateX(0)}
}


/* swiper */
.swiper {width:100%; height:100%; }
.swiper-slide {display:flex; justify-content:center; align-items:center; text-align:center; }
/* .swiper-slide img {display:block; width:97%; height:97%; object-fit:cover; } */
.swiper-slide img {display:block; object-fit:cover; }
.swiper-slide figcaption {margin-left:2.5rem; text-align:left;}
.swiper-slide figcaption .section-title {padding:0; margin-bottom:0.6rem; }
.swiper-slide.round-bann a {display:block; width:100%;}
.swiper-slide.round-bann figcaption {height:7.5rem}
.swiper-slide.round-bann .bg-area {position:relative; display:flex; align-items:center; justify-content:space-between; height:9.6rem; margin-top:1.6rem; border-radius:25rem; }
.swiper-slide.round-bann .bg-area button {width:auto; padding-left:2.1rem; padding-right:2.1rem; margin-left:2.5rem; }
.swiper-slide.round-bann .bg-area img {position:absolute; right:0; top:-1.6rem; height:11.2rem; width:auto;}
.swiper-slide.round-bann .bg-area .banner-img {flex:none; width:12.8rem; height:12.8rem; background-size:12.8rem 12.8rem; }
.top0 {top:0 !important}

.swiper-pagination {bottom:0 !important}
.swiper-pagination-bullet {height:0.6rem; width:0.6rem; margin:0 0.25rem !important; background-color:#ddd; opacity:1}
.swiper-pagination-bullet-active {width:2.2rem; height:0.6rem; border-radius:0.3rem; background-color:var(--color-gray, #aaa)}


/* 하단 팝업 */
.popup {position:fixed; z-index:999; top:0; left:0; width:100%; height:100%;}
.popup .popup-inner {max-height:94%;}
.popup-bottom:before {content:''; position:fixed; z-index:1000; top:0; bottom:0; left:0; right:0; background-color:rgba(0,0,0,.6);}
.popup-bottom .popup-inner {position:absolute; z-index:1001; bottom:0; width:100%; display:flex; flex-direction:column; gap:1rem; background-color:#fff; border-radius:1.6rem 1.6rem 0 0; transition:translate .5s}
.pop-header {position:relative; padding:3rem 2rem 2rem; border-bottom:1px solid #f5f5f5; text-align:center;}
.pop-header .article-title, .pop-content .article-title {padding:0;}
.popup .btn-close {position:absolute; top:1rem; right:1rem; }
.popup-bottom .pop-content {position:relative; padding:3rem 2rem; /*overflow-y:auto;*/}
.popup-bottom .pop-header + .pop-content {padding:1rem 1rem 3rem; margin-right:1rem; margin-left:1rem; overflow-y:auto;}
.pop-content .pop-list ul {display:flex; flex-direction:column; gap:0.2rem; font-size:var(--font-medium, 1.4rem); font-weight:700; color:var(--color-title, #222); line-height:1.46}
.pop-content .pop-text {margin-top:-3px; margin-bottom:-3px; font-size:var(--font-medium, 1.4rem); font-weight:700; color:var(--color-title, #222); line-height:1.46}
.pop-content .pop-text.strong {color:var(--color-primary, #494E8F); }
.pop-content .pop-text + .pop-text {margin-top:1.6rem;}
.pop-content .pop-list li {display:flex; align-items:center; justify-content:space-between; height:4.8rem; padding:0; margin:0}

.popup-inner.cta .pop-content {margin-bottom:4.4rem}
.pop-content + .cta { bottom:0;}
.pop-content + .cta button {width:100%; height:4.4rem; border-radius:0;}
.popup-bottom .popup-inner .card .card-header {border-radius:1.6rem 1.6rem 0 0;}
.popup-bottom .popup-inner .card:not(.action) .card-header:after {height:5.6vw}

/* 가운데 팝업 */
.popup-center:before {content:''; position:fixed; z-index:1000; top:0; bottom:0; left:0; right:0; background-color:rgba(0,0,0,.6);}
.popup-center .popup-inner {position:absolute; z-index:1001; top:50%; left:50%; min-width:25rem; width:80%; max-width:30rem; padding-bottom:1rem; display:flex; flex-direction:column; gap:1rem; transform:translate(-50%,-50%); background-color:#fff; border-radius:1.2rem}
.popup-center .pop-header {text-align:center;}
.popup-center .pop-content {position:relative; padding:4rem 1.8rem 3rem; text-align:center; /*overflow-y:auto;*/}
.popup-center .pop-header + .pop-content {padding:0rem 1rem 2rem; margin-left:1rem; margin-right:1rem; overflow-y:auto;}
.popup-center .pop-content .btn-group {gap:0.4rem; margin-top:2rem}

/* 전체 팝업 */
.popup-center .popup-all {width:auto; background-color:transparent; text-align:center; }
.popup-center .popup-all > div {overflow-y:auto;}
.popup-center .popup-all .section-title {color:#fff; }
.popup-center .popup-all figure {width:24rem; margin:auto;}
.popup-center .popup-all .pop-text {color:#fff;}
.popup-center .popup-all .btn-group {margin-top:3.1rem}

/* 뒤에 후광나오는 팝업 */
.halo-wrap {color:#fff}
.halo-wrap .btn-closeWhite {position:absolute; z-index:1001; top:4rem; right:2.4rem}
.halo-wrap .popup-inner {width:100%;}
.halo-wrap .popup-inner figure, .halo-wrap .popup-inner .stamp-exercise figure {position:relative; display:flex; align-items:center; justify-content:center; width:24rem; height:24rem; margin:5rem auto;}
.halo-wrap .popup-inner .mc-badge figure {margin:2.4rem auto 1rem;}
.halo-wrap .popup-inner figure img {width:16rem}
.halo-wrap .popup-inner figure img.halo {position:absolute; top:0; left:0; z-index:-1; width:24rem; height:24rem; animation:rotate 10s linear infinite}
.halo-wrap .popup-inner .btn-group {margin:0}


/* 팝업 인터랙션 효과 */
.layer-popup-box {position:fixed}
.popup.popup-bottom .popup-inner, .popup.popup-bottom.show-up .popup-inner {animation:btmPop-upAni .4s ease forwards}
.popup.popup-bottom.show-down .popup-inner {animation:btmPop-downAni .4s ease forwards}
.popup.popup-center.show-fade .popup-inner {animation:center-pop-ani .4s ease forwards }

@keyframes btmPop-upAni {
    0% {transform:translateY(100%)}
	20% {transform:translateY(100%)}
    100% {transform:translateY(0)}
}
@keyframes btmPop-downAni {
    0% {transform:translateY(0)}
	20% {transform:translateY(0)}
    100% {transform:translateY(100%)}
}
@keyframes center-pop-ani {
    0% {opacity:0; visibility: hidden;}
	30% {opacity:0; visibility: hidden;}
    100% {opacity:1; visibility: visible;}
}


/* 카드상세에서 사진 상세팝업 */
.picture-pop.main-pop .popup-inner {position:fixed; height:100%; margin-top:1rem; background-color:transparent;}
.picture-pop.main-pop .btn-close {z-index:1002; top:0.8rem; width:4rem; height:4rem; background-image:url(../images/ico_close_white.svg);}
.picture-pop.main-pop .pop-content {height:100%}
.picture-pop.main-pop .pop-content .swiper-wrapper {display:flex; align-items:center; background-color:transparent;}
.picture-pop.main-pop .pop-content .swiper {max-width:auto; }
div.picture-pop.main-pop .pop-content .swiper-slide {background-color:transparent;}
.picture-pop.main-pop .pop-content .swiper-slide img {max-width:100%; max-height:100%; width:auto; height:auto;}


/* select2  커스컴 */
span.select2-container {height:3.6rem}
span.select2-results__options {color:#aaa}
span.select2-container .select2-selection--single {height:3.6rem}
span .select2-results__option--selectable {color:#aaa}
li.select2-results__option {margin:0.4rem; padding:0.9rem 1.2rem}
span.select2-container--default .select2-selection--single {border-radius:10rem;}
span.select2-container--default .select2-selection--single .select2-selection__arrow {top:50%; right:0.6rem; height:3.4rem; width:3rem; transform:translateY(-50%);}
span.select2-container .select2-selection--single .select2-selection__rendered {height:3.6rem; padding-left:1.6rem; padding-right:3rem; line-height:1.5; }
span.select2-container--default .select2-selection--single .select2-selection__clear {display: none;}

/* sweet-alert  커스컴 */
div.sweet-alert {padding-bottom:30px; border-radius:12px; font-family:'Pretendard', 'Malgun Gothic', sans-serif;}
div.sweet-alert p {font-size:1.5rem}
div.sweet-alert button {background-color:var(--color-primary, #494E8F) !important; border-radius:5rem; }

/* quill.snow.css 에서 지워진 부분 추가. 행복수행문 제외하고 적용*/
.ql-editor:not([id$="_box"]) a {text-decoration:underline; color:blue}
.ql-editor:not([id$="_box"]) u {text-decoration:underline;}
.ql-editor:not([id$="_box"]) s {text-decoration:line-through;}
.ql-editor:not([id$="_box"]) em {font-style:italic;}
.ql-editor:not([id$="_box"]) h1 {font-size:2em}
.ql-editor:not([id$="_box"]) h2 {font-size:1.5em}
.ql-editor:not([id$="_box"]) h3 {font-size:1.17em}
.ql-editor:not([id$="_box"]) h4 {font-size:0.9em} 
.ql-editor:not([id$="_box"]) h5 {font-size:0.83em}
.ql-editor:not([id$="_box"]) h6 {font-size:0.67em}
.ql-editor:not([id$="_box"]) li:after {display:none;}

.bottom-nav-hide {display: none}
.bottom-nav-show {display: block}
.mb-50 {min-height:0.1rem; margin-bottom: 5rem !important;}
.pb-50 {padding-bottom:5rem !important; }
.pb-90 {padding-bottom:9rem !important;}