@charset "utf-8";

@font-face {
    font-family: 'TTTtangsbudaejjigaeB';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/TTTtangsbudaejjigaeB.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'WandohopeR';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/WandohopeR.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'kdg_Medium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/kdg_Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'KNPSKkomi-Regular00';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/KNPSKkomi-Regular00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'HSGaeulSenggak20';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/HSGaeulSenggak20.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GongGothicMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

*, :after, :before {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
* {
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	-webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
}
a {
	color: #000; text-decoration:none; 
	outline: none;
	-webkit-tap-highlight-color: transparent; 
	-webkit-tap-highlight-color: rgba(0,0,0,0); 
}
body {
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
html, body {text-size-adjust: none; -webkit-text-size-adjust: none;}

button {padding: 0; border: 0; background: none; color: #000; outline: none; 
	-webkit-tap-highlight-color: transparent; 
	-webkit-tap-highlight-color: rgba(0,0,0,0); 
	touch-action: manipulation;
}
img {max-width: 100%; height: auto; vertical-align: middle; }
img[src=""] {display: none; }

input {border: 0; border-radius: 0; }
input[type="button"] {background: none;}
input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input:disabled {background: #FFF; }
input::placeholder {color: #B6B9C2; }
textarea::placeholder {color: #B6B9C2; }
input:not(.sel_label):focus::placeholder {font-size: 0; }
.readonly {border: 1px solid #DDDDDD !important; background: #F5F5F5 !important; }

.no_scrollbar {
    -ms-overflow-style: none; /* 인터넷 익스플로러 */
    scrollbar-width: none; /* 파이어폭스 */
}
.no_scrollbar::-webkit-scrollbar {display: none;}

.font_ttangs {font-family: 'TTTtangsbudaejjigaeB', sans-serif; }
.font_notokr {font-family: 'Noto Sans KR', sans-serif;}
.font_kdg {font-family: 'kdg_Medium', sans-serif; }
.font_gaeul {font-family: 'HSGaeulSenggak20', sans-serif;}
.font_nn_mj {font-family: "Nanum Myeongjo", serif; font-style: normal; }

.not-selectable {
	user-select: none; /* standard */
	-moz-user-select: none; /* firefox specific */
	-webkit-user-select: none; /* Chrome, Opera and Safari*/
	-ms-user-select: none;
}
*[onclick], button {cursor: pointer;}

/** common */
html.on_menu {overflow: hidden; }
html.on_modal {overflow: hidden; }
.no_cursor {cursor: default;}
.app_hidden {display: none;}
.is_web .app_hidden {display: block; }
.is_web .web_hidden {display: none; }
.screen_wrap {flex: 1; display: flex; flex-direction: column; overflow-y: hidden; }
.screen_inner, .inner {width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 20px;}
.bn_cover_wrap {position: relative; width: 100%; max-width: 1000px; margin: 0 auto; }
.relative {position: relative;}
.empty_li {color: #5E5C58; font-size: 15px; font-weight: 500;}
.para_ellipsis {
	display: -webkit-box;
    -webkit-line-clamp: 2; /* 라인수 */
    -webkit-box-orient: vertical;
	line-height: 1.3; white-space: normal; overflow: hidden; word-wrap: break-word; word-break: break-all;
}


.mt50 {margin-top: 50px; }





/** input */
.etc_input_wrap {display: none;}
.etc_input_wrap.on {display: block;}
.tooltip {position: relative; display: flex; align-items: center; }
.tip_bubble {display: none; align-items: center; position: absolute; left: 100%; margin-left: 15px; border-radius: 3px; background: #FFF; box-shadow: 0 0 8px 0 rgba(0,0,0,0.10);z-index: 115; }
.tip_bubble.on {display: flex; }
.tip_bubble .tail_wrap {position: absolute; right: 100%; will-change: transform; filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.20));}
.tip_bubble .tail_wrap > div {
	width: 8px; height: 7px; background: #FFF; clip-path: polygon(0 50%, 100% 100%, 100% 0);
}
.tip_bubble .tip_desc {
	position: relative;
	width: max-content; max-width: calc((50 / 100) * 100vw); padding: 5px 7px; line-height: 14px; background: #FFF; 
	color: #395DC9; text-align: left; font-size: 12px; font-weight: 500; word-break: keep-all; 
}

.file_hidden {width: 1px; height: 1px; margin: -1px; visibility: hidden; }

.input_form_group {display: flex; gap: 10px; }
.input_form_group .input_form {flex: 1; }
.input_form_wrap > .input_form:last-child,
.write_form_wrap .input_form:last-child {margin-bottom: 0; }

.input_group {display: flex; gap: 10px; }
.input_group .input_wrap {flex: 1; }
.input_group span {line-height: 38px; }

.input_form {position: relative; margin-bottom: 25px; }
.input_form_caution {margin: -30px 0 40px; font-size: 14px; font-weight: 600;}
.input_form_caution.pw_caution {margin: -30px 0 10px; }
.input_form_caution .red {color: #C5211F; }
.input_form_caution .info {padding-top: 5px; }

.input_form.type2 {display: flex; align-items: flex-start;}
.input_form.type2 .type2_label {display: flex; align-items: center; gap: 3px; width: 120px; height: 38px; }
.input_form.type2 .type2_label label {font-size: 14px; font-weight: 500; }
.input_form.type2 .type2_label .tooltip img {width: 14px; object-fit: contain; }
.input_form.type2 .type2_content {flex: 1; }

.sns_input_form {}
.sns_input_form label {display: block; margin-bottom: 5px; font-size: 14px; font-weight: 600;}
.sns_input_form .type2_label {color: #4D5363; }

.note_write_wrap .input_form .input_form_caution, 
#sub_prac_today_write .input_form .input_form_caution {margin: -20px 0 40px; }

.edit_area .input_form_caution {margin: -20px 0 30px; }
.edit_area .input_form_caution.pw_caution {margin: -20px 0 10px; }

.input_form .input_label {display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.input_form .label_hidden {width: 1px; height: 1px; margin: -1px; visibility: hidden; }
/* .input_form .file_hidden {width: 1px; height: 1px; margin: -1px; visibility: hidden; } */
.input_form .input_wrap {margin-bottom: 10px; }
.input_form .input_wrap:last-of-type {margin-bottom: 0; }
/* .input_wrap input {display: block; width: 100%; height: 38px; line-height: 36px; padding: 0 20px; border: 1px solid #F5F7FA; border-radius: 10px; background: #F5F7FA; font-size: 15px; outline: none;} */
.input_wrap input {display: block; width: 100%; height: 38px; line-height: 36px; padding: 0; border: 0; border-bottom: 1px solid #B6B9C2; font-size: 16px; outline: none;}
.textarea_wrap > textarea {display: block; width: 100%; height: 230px; padding: 0; border: 0; font-size: 16px; outline: none; resize: none; }


.file_wrap {display: flex; gap: 10px; position: relative;}
.file_wrap .file_hidden {position: absolute;}
.file_wrap input[type="text"] {flex: 1; background: #FFF; }
.file_wrap label {display: flex; justify-content: center; align-items: center; width: 84px; border-radius: 10px; background: #BEBEBE; font-size: 0; }
.file_wrap label span {color: #FFF; font-size: 15px; font-weight: 500;}

.birth_wrap {display: flex; align-items: center; border: 1px solid #F5F7FA; border-radius: 10px; background: #F5F7FA; }
.birth_wrap > span {font-size: 14px;}
.birth_wrap > div {flex: 1;}
.birth_wrap > div input {display: block; width: 100%; height: 56px; line-height: 36px; padding: 0 10px; border: 0; background: none; text-align: center; font-size: 15px; outline: none;}

.write_form_wrap .input_wrap input {background: #FFF; }
.write_form_wrap .textarea_wrap textarea {background: #FFF; }


.password_group .input_wrap {margin-bottom: 10px}

.wrap_in_button {position: relative;}
.wrap_in_button input {}
.wrap_in_button button {position: absolute; top: 50%; right: 0; transform: translateY(-50%); /* width: 88px; */ padding: 6px 10px; border-radius: 10px; background: #5F5F5F; color: #FFF; }
.wrap_in_button button > span {font-size: 13px; font-weight: 500;}
.wrap_in_button button.send_email {width: auto; }
.valid_email:disabled {background: #C5211F; }
/* .wrap_in_button .send_cert {display: none;} */
.wrap_in_button .is_send, 
.wrap_in_button .show_send {display: block;}

.wrap_in_button label {position: absolute; top: 50%; right: 0; transform: translateY(-50%); /* width: 88px; */ padding: 6px 10px; border-radius: 10px; background: #5F5F5F; color: #FFF; }
.wrap_in_button label span {font-size: 13px; font-weight: 500;}

.wrap_in_elem {position: relative;}
.wrap_in_elem *:not(input) {display: block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); }


.cert_num_wrap {display: none;}
.cert_num_wrap.is_send {display: block;}
.cert_check {display: none;}
.cert_check.is_check {display: block;}

.input_wrap.image_group {display: flex; align-items: center; gap: 10px; }
.image_group > div {flex: 1; position: relative; max-width: 110px; border: 1px solid #000; border-radius: 10px; background: url('/include/images/add_img_big_icon.png') no-repeat center / 17px; overflow: hidden;}

.image_group > div > label {display: block; position: relative; width: 100%; padding-bottom: 100%; }
.image_group > div > label input[type="file"] {display: none; }
.image_group > div img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.img_area .btn_img_del {display: none; position: absolute; top: 0; right: 0; width: 24px; height: 24px; border-radius: 0 0 0 10px; background: url('/include/images/del_img_icon.png') no-repeat center / contain, #666;}
.img_area img ~ .btn_img_del {display: block; }

.info_text {display: flex; justify-content: start; align-items: center; gap: 7px; position: absolute; top: 100%; left: 0; margin-top: 10px; }
.info_text img {width: 14px; height: auto; }
.info_text span {color: #ED0000; font-size: 13px;}


.input_wrap.second_para {display: none; margin-top: 0px; }
.input_wrap.second_para.on {display: block; }



/** isdel_input_wrap */
.input_wrap .text_del {display: none; position: absolute; right: 0; width: 22px; height: 22px; border-radius: 22px; background: url('/include/images/file_del_icon.png') no-repeat center / 12px auto, #808080; font-size: 0; }

.input_wrap.is_data {display: flex; align-items: center; position: relative;}
.input_wrap.is_data input {padding: 0 40px 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    
}
.input_wrap.is_data .text_del {display: block; }


/** fake */
.fake_input_wrap {display: flex; align-items: center; position: relative;}
.fake_input_wrap > div {display: flex; align-items: center; width: 100%; height: 38px; border-bottom: 1px solid #B6B9C2; }
.fake_input_wrap span {flex: 1; color: #B6B9C2; word-break: break-all; 
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.fake_input_wrap button {display: none; position: absolute; right: 0; width: 22px; height: 22px; border-radius: 22px; background: url('/include/images/file_del_icon.png') no-repeat center / 12px auto, #808080; font-size: 0; }
.fake_input_wrap button img {width: 11px; height: 11px; object-fit: contain;}
.fake_input_wrap.is_data div {padding: 0 40px 0 0}
.fake_input_wrap.is_data span {color: #1E1E1E; }
.fake_input_wrap.is_data button {display: block; }

.input_audio .file_hidden {position: absolute; }



/** - button */
.active_button {border: 1px solid #C5211F; border-radius: 10px; background: #C5211F; color: #FFF; }

.submit_button {position: relative; display: block; width: 100%; height: 52px; margin: 20px 0; padding: 0 20px; border: 1px solid #C5211F; border-radius: 10px; background: #C5211F; }
.submit_button .button_icon {position: absolute; top: 50%; left: 20px; transform: translateY(-50%); font-size: 0; }
.submit_button .text {line-height: 36px; color: #FFF; font-size: 16px; font-weight: 500;}
.border_button {border-color: #C5211F;}
.border_button .text {color: #C5211F; }

.white_button {border-color: #FFF; background: #FFF;}
.white_button .text {color: #000; }
.cancel_button {border-color: #BEBEBE; background: #BEBEBE;}

.kakao_button {border-color: #FEE711; background: #FEE711;}
.kakao_button .text {color: #3C1E1E;}
.kakao_button .button_icon {width: 21px;}

.naver_button {border-color: #00CD4C; background: #00CD4C;}
.naver_button .text {color: #FFF;}
.naver_button .button_icon {width: 17px;}

.google_button {border-color: #EDEDED; background: #F7F7F7;}
.google_button .text {color: #1E1E1E;}
.google_button .button_icon {width: 22px;}

.float_button {position: relative; height: 136px;}
.float_button > div {position: absolute; bottom: 40px; width: 100%;}
.float_button .submit_button {margin: 0;}

.more_button {padding: 20px; }
.more_button button {
	display: flex; justify-content: center; align-items: center; gap: 10px; 
	width: 100%; max-width: 440px; height: 48px; margin: 0 auto; border: 1px solid #EDEDED; border-radius: 10px; background: #FFF; font-size: 0; 
}
.more_button button span {color: #888; font-size: 15px; font-weight: 700;}
.more_button button i {display: none; font-size: 12px; font-weight: bold;}

.form_submit_wrap {position: relative; width: auto; height: 52px; margin: 0 0 40px; }
.form_submit_wrap .submit_button {height: inherit; margin: 0;}

.is_app .form_submit_wrap {}
/* .is_app .form_submit_wrap.fixed .submit_button {position: fixed; left: auto; right: auto; width: calc(100% - 40px); bottom: 40px; z-index: 120; } */



/** - check box */
.chkbox_label {flex: 1; position: relative; display: flex; align-items: center;}
.chkbox_label input[type="checkbox"] {width: 1px; height: 1px; margin: -1px; outline: none; visibility: hidden;}
.chkbox_label .chkbox {width: 20px; height: 20px; border-radius: 4px; background: url('/include/images/chk_mark.png') no-repeat center/10px auto, #EDEDED;}
.chkbox_label span {margin-left: 14px; font-size: 14px;}
.chkbox_label input[type="checkbox"]:checked ~ .chkbox {background-color: #4D5363; }



/** - radio */
.radio_group {display: flex; gap: 10px;}
.radio_label {position: relative; flex: 1; -webkit-tap-highlight-color: transparent;}
.radio_label input[type="radio"] {position: absolute; width: 1px; height: 1px; margin: -1px; outline: none; visibility: hidden;}
.radio_label div {display: flex; justify-content: center; align-items: center; height: 42px; border: 1px solid #B6B9C2; border-radius: 6px; cursor: pointer;}
.radio_label div span {color: #B6B9C2; font-size: 15px; font-weight: 500;}
.radio_label input[type="radio"]:checked ~ div {background: #1E1E1E; border: 1px solid #1E1E1E; }
.radio_label input[type="radio"]:checked ~ div span {color: #FFF; }

.radio_wrap label {position: relative; display: block; -webkit-tap-highlight-color: transparent;}
.radio_wrap label input[type="radio"] {position: absolute; width: 1px; height: 1px; margin: -1px; visibility: hidden; outline: none;}
.radio_wrap label .radio_button {display: flex; justify-content: center; align-items: center; padding: 7px 12px; border: 1px solid #EBEBEB; border-radius: 20px; }
.radio_wrap label .radio_button span {color: #5F5F5F; font-size: 13px; font-weight: 500;
	user-select: none; /* standard */
	-moz-user-select: none; /* firefox specific */
	-webkit-user-select: none; /* Chrome, Opera and Safari*/
	-ms-user-select: none;
}
.radio_wrap label input[type="radio"]:checked ~ .radio_button {border: 1px solid #C5211F; background: #C5211F; }
.radio_wrap label input[type="radio"]:checked ~ .radio_button span {color: #FFF; font-weight: bold; }



/** select (input) */
.select_wrap {position: relative;}
.select_wrap .sel_arrow {position: absolute; top: 50%; right: 0; transform: rotate(0deg); width: 15px; height: 9px; margin-top: -4px; background: url('/include/images/select_arrow.png') no-repeat center/ 15px 9px;}
.select_wrap .select_ul {display: none; position: absolute; left: 0; max-height: 300px; overflow: auto; background: #FFF; width: 100%; padding: 5px 0; z-index: 121;
	-webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
	-moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}
.select_wrap .select_ul li {padding: 5px 20px; line-height: 1.5rem; font-size: 15px; font-weight: 500; cursor: pointer;}
.select_wrap .select_ul.li_divide li {border-bottom: 1px solid #B6B9C2; }
.select_wrap .select_ul.li_divide li:last-child {border-bottom: 0; }
.select_wrap .sel_label {padding-right: 40px; text-overflow: ellipsis; cursor: pointer}
.select_wrap .sel_label.active ~ .sel_arrow {transform: rotate(180deg)}
.select_wrap .sel_label.active ~ .select_ul {display: block;}

.select_wrap div.sel_label {display: flex; align-items: center; height: 38px; border-bottom: 1px solid #B6B9C2;}


/** select box */
.select_box_wrap {display: flex; position: relative; height: 100%; padding-right: 15px;}
.select_box_wrap .sel_label {display: flex; align-items: center; font-size: 14px; font-weight: 500; }
.select_box_wrap .arrow {display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; right: 0; transform: translate(0, -50%) rotate(0deg); width: 11px; height: 11px; background: url('/include/images/note_sch_arrow.png') no-repeat center / contain;}
.select_box_wrap .select_ul {display: none; position: absolute; top: 100%; right: 0; left: auto; width: max-content; margin-top: 10px; border-radius: 10px; background: #FFF; z-index: 150;
	-webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
	-moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}
.select_box_wrap .select_ul.active {display: block;}
.select_box_wrap .select_ul.active ~ .arrow {transform: translate(0, -50%) rotate(180deg);}
.select_box_wrap .select_ul li {padding: 12px 15px; }



/** radio_check */
.radio_check_wrap {display: flex; align-items: center; gap: 15px; margin-bottom: 40px;}
.radio_check_wrap label {display: flex; align-items: center; gap: 10px; position: relative; }
.radio_check_wrap label input[type="radio"], .radio_check_wrap label input[type="checkbox"] {position: absolute; top: 0; left: 0; width: 1px; height: 1px; border: 0; outline: none; visibility: hidden; }
.radio_check_wrap label span {display: block; width: 25px; height: 25px; border-radius: 10px; background: url('/include/images/chk_icon.png') no-repeat center/contain, #E2E4E7; }
.radio_check_wrap label p {font-size: 14px; font-weight: 500; letter-spacing: -0.04em; word-break: keep-all;}
.radio_check_wrap label input[type="radio"]:checked ~ span, .radio_check_wrap label input[type="chekcbox"]:checked ~ span {background-color: #5F5F5F; }



/** header */
.navigate_header {position: static; top: 0; left: 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: 100%; background: #FFF; z-index: 100;}
.navigate_header .nav_inner {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.navigate_header .song_title {width: 100%; margin-top: -5px; padding: 0 20px; padding-bottom: 12px; text-align: center; font-size: 18px; font-weight: 600;}
.navigate_header .date_at {width: 100%; text-align: center; color: #BDBDBD; font-size: 15px; font-weight: 400; }

.navigate_header .header_wrap .song_title {display: none;}

.header_wrap {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; position: relative; width: 100%; height: 48px; }
.header_wrap h2 {/* display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap;  */
	text-align: center; font-size: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 
}
.header_wrap h2.has_icon {display: flex; align-items: center; gap: 6px; }
.header_wrap h2.has_icon .quiz_icon {width: 27px; height: 27px; border-radius: 8px; }
.header_wrap h2.has_icon .hear_icon {background: url('/include/images/quiz_hear_icon.png') no-repeat center / cover, #188FFD; }
.header_wrap h2.has_icon .music_icon {background: url('/include/images/quiz_music_icon.png') no-repeat center / cover, #FEAA27; }
.header_wrap h2 .date_at {display: none; width: auto;}


.header_wrap .header_right {display: flex; align-items: center; gap: 6px; position: absolute; right: 0; }
.header_wrap .header_right .button_type01 {width: 56px; height: 30px; border: 1px solid #EBEBEB; border-radius: 30px; color: #5F5F5F; font-size: 15px; font-weight: 500; }

.extra_wrap {flex: 1; padding: 10px 0; }

.navigate_header .header_icon {width: 25px; height: 25px; margin-right: 10px; border-radius: 8px; }
.navigate_header .header_icon.listen {background: url('/include/images/quiz_listen_icon.png') no-repeat center/cover, #5D66EB; }
.navigate_header .header_icon.images {background: url('/include/images/quiz_img_icon.png') no-repeat center/cover, #FE6F54; }

/* .navigate_header h2 .no_web {display: block; }
.navigate_header h2 .no_app {display: none; } */

.go_back_button {position: absolute; top: 50%; left: 10px; padding: 10px; transform: translateY(-50%); font-size: 0; z-index: 102;} 
.go_back_button img {width: 9px; height: auto;}

.go_back_button2 {position: absolute; top: 50%; left: -10px; padding: 10px; transform: translateY(-50%); font-size: 0; z-index: 102;}
.go_back_button2 img {width: 17px; object-fit: contain;}


.follow_search_button {position: absolute; top: 50%; right: 10px; padding: 10px; transform: translateY(-50%); font-size: 0; z-index: 102;}
.follow_search_button img {width: 17px; height: auto;}

.view_option_button {display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; right: -10px; transform: translateY(-50%); padding: 10px; }
.view_option_button img {width: 13px; height: 13px; object-fit: contain;}

.screen_info {margin: 20px 0 40px; }
.screen_info h3 {margin-bottom: 7px; font-size: 20px; font-weight: bold;}
.screen_info span {color: #4C4C4C; font-size: 15px;}

.req {color: #C5211F; }

.is_web .navigate_header .song_title {display: none;}
.is_web .navigate_header .header_wrap .song_title {display: inline; padding: 0 10px 0 5px; font-size: inherit;}
.is_web .navigate_header .header_wrap .date_at {display: inline-block; }
.is_web .navigate_header > .date_at {display: none; }
.is_web .navigate_header .header_wrap {justify-content: flex-start;}
.is_web .navigate_header .go_back_button2 {display: none; }



/** - web list header */
.web_navigate_header {padding-top: 30px; }
.web_navigate_header .nav_inner {display: flex; align-items: center; position: relative; margin-bottom: 20px; padding: 0 20px 20px; border-bottom: 1px solid #000;}
.web_navigate_header .nav_inner:before {display: block; clear: both; content: ''; position: absolute; top: 0; left: 0; width: 10px; height: 10px; background: #C5211F;}
.web_navigate_header .header_icon {width: 25px; height: 25px; margin-right: 10px; border-radius: 8px; }
.web_navigate_header .header_icon.listen {background: url('/include/images/quiz_listen_icon.png') no-repeat center/cover, #5D66EB; }
.web_navigate_header .header_icon.images {background: url('/include/images/quiz_img_icon.png') no-repeat center/cover, #FE6F54; }
.web_navigate_header h2 {position: relative; font-size: 18px; font-weight: 500;}


.main_wrap.sub_wrap .sub_header {}
.main_wrap.sub_wrap .sub_header .nav_inner {position: relative; display: flex; justify-content: center; align-items: center; height: 58px; padding: 0 40px;}

.main_wrap.sub_wrap .sub_header .right_button {position: absolute; top: 50%; right: -10px; transform: translate(-50%, -50%); padding: 10px;}
.main_wrap.sub_wrap .sub_header .right_button.song_edit img {width: 17px}
.main_wrap.sub_wrap .sub_page_content {flex: 1; overflow: auto; }


/** - web post header */
.sub_wrap .post_header {padding-top: 30px; padding-bottom: 10px; }
.sub_wrap .post_header .nav_inner {display: flex; justify-content: flex-end; height: auto;}
.sub_wrap .post_header .view_option_button {position: relative; top: 0; right: -10px; transform: translate(0, 0); }




/** modal */
.modal {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 150;}
.modal .modal_back {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5);}
.modal .modal_content {position: absolute; width: 100%; background: #FFF; }
.modal .confirm_wrap {display: flex; gap: 10px; }
.modal .confirm_wrap button {margin: 0}



/** login */
.login_wrap {flex: 1; display: flex; flex-direction: column; }
.login_wrap .screen_inner {flex: 1; }

#f_login {max-width: 500px; margin: 0 auto; }
#f_login .login_top_text {margin: 80px 0 60px; line-height: 1.4em; font-size: 30px; font-weight: 500;}

#f_login .button_group {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px; max-width: 400px; margin: 30px auto auto;}
#f_login .button_group button {position: relative; display: block; width: 100%; height: 52px; padding: 0 20px; border-width: 1px; border-style: solid; border-radius: 10px;}
#f_login .button_group button .button_icon {position: absolute; top: 50%; left: 20px; transform: translateY(-50%); font-size: 0; }
#f_login .button_group button .text {line-height: 36px; font-size: 16px; font-weight: 500; }
#f_login .button_group .naver_button .button_icon {left: 22px; }

.login_wrap .bot_inq {padding-top: 40px; padding-bottom: 70px; text-align: center; color: #666; font-size: 14px; word-break: keep-all; }
.login_wrap .bot_inq a {color: #666; }



/** cetify */
.certify_wrap .screen_container {flex: 1; display: flex; flex-direction: column; padding-bottom: 60px; overflow: hidden;}
.certify_wrap .screen_container .screen_inner {flex: 1; max-width: 500px;}
.certify_wrap .cert_num_wrap .countdown {position: absolute; top: 50%; right: 20px; transform: translateY(-50%); font-size: 14px; font-weight: bold;}
.certify_wrap .inq_email {text-align: center; font-size: 0; }
.certify_wrap .inq_email a {border-bottom: 1px solid #000; font-size: 14px; font-weight: 500;}



/** regist */
.regist_wrap .screen_container {flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.regist_wrap .screen_inner {display: flex; flex-direction: column; overflow: hidden; max-width: 500px;}

.form_chapter {margin: 60px 0 0; }
.form_chap1 {}
.chap_divide {height: 6px; margin: 30px -20px; background: #F7F7F7; }
.form_chap2 > div {margin-bottom: 20px; }

.input_wrap .countdown {position: absolute; top: 50%; right: 80px; transform: translateY(-50%); font-size: 14px; font-weight: bold;}
.input_wrap.ph_hour_wrap {flex: initial;}
.input_wrap.ph_hour_wrap input {text-align: right;}

#regist_form {flex: 1; overflow-y: auto; margin: 0 -20px; padding: 0 20px; }
.pf_img_wrap {display: flex; position: relative; width: 60px; height: 60px; margin: 10px auto; }
.pf_img_wrap .img_area {position: relative; width: 100%; height: 100%; border-radius: 50px; background: #F5F7FA; overflow: hidden; }
.pf_img_wrap .img_area.no_img {background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA; }
.pf_img_wrap .img_area img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
.pf_img_wrap button {position: absolute; bottom: 0; right: 0; transform: translate(30%, 30%); width: 24px; height: 24px; border-radius: 24px; }
.pf_img_wrap .reg_button {background: url('/include/images/reg_img_icon.png') no-repeat center/contain, #C4C8CC}
.pf_img_wrap .del_button {background: url('/include/images/del_img_icon.png') no-repeat center/contain, #C4C8CC}

.pf_email_wrap {margin: 20px auto; text-align: center; color: #4D5363; font-size: 16px; }
.sex_radio div {height: 38px; }


.regist_wrap .agree_wrap {position: relative; display: flex; justify-content: space-between; align-items: center; }
.regist_wrap .agree_wrap .chkbox_label em {color: #EF4646; font-style: normal;}
.regist_wrap .agree_wrap .agree_link {position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding: 5px; color: #888; font-size: 12px; }

.regist_wrap .all_agree {}
.regist_wrap .all_agree .chkbox {width: 24px; height: 24px; background: url('/include/images/chk_mark.png') no-repeat center/12px auto, #EDEDED;}
.regist_wrap .all_agree .chkbox_label {margin: 0 0 14px; }
.regist_wrap .all_agree .chkbox_label span {margin-left: 10px; font-size: 15px; font-weight: 600; }

.regist_wrap .unit_agree {margin: 5px 0 30px; }
.regist_wrap .unit_agree .chkbox_label {padding: 10px 0 10px 12px;}

.regist_wrap .form_submit_wrap {margin-left: -20px; margin-right: -20px; padding: 0 20px; }
.regist_wrap .form_submit_wrap .submit_button {max-width: calc(500px - 40px); }


#agree_modal .modal_content {bottom: 0; left: 0; padding: 30px 20px; border-radius: 15px  15px 0 0;}

#dajim_modal .modal_content {top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 30px 20px; border-radius: 15px; }
#dajim_modal .modal_content h3 {margin-bottom: 15px; text-align: center; font-size: 20px;}
#dajim_modal .modal_content .preview {position: relative; margin-bottom: 20px; background: url('/include/images/theme/theme_basic.png') no-repeat center / 100% 100%; }
#dajim_modal .modal_content .preview:before {display: block; clear: both; content: ''; padding-bottom: calc((134 / 350) * 100%);}
#dajim_modal .modal_content .dajim_text {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; }
#dajim_modal .modal_content .dajim_text p {text-align: center; color: #572B00; font-family: 'WandohopeR', sans-serif; font-size: 20px; }

/*
.is_web .regist_wrap {overflow: initial; }
.is_web .regist_wrap .screen_container {overflow: initial; }
.is_web .regist_wrap .screen_inner {overflow: initial; }
.is_web #regist_form {overflow: initial; }
*/


/** find_email */

/** find_result */
.find_result_wrap {height: 100vh; }
.find_result_wrap .screen_container {flex: 1; display: flex; flex-direction: column; }
.find_result_wrap .screen_inner {flex: 1; display: flex; flex-direction: column; max-width: 500px;}
.email_result {flex: 1}
.email_result strong {display: block; margin-bottom: 10px; font-size: 23px; font-weight: 500;}
.email_result span {display: block; color: #9799A0; font-size: 15px; letter-spacing: -0.04em;}

.find_result_wrap .inq_email {text-align: center; font-size: 0; }
.find_result_wrap .inq_email a {border-bottom: 1px solid #000; font-size: 14px; font-weight: 500;}


/** find_pw */
.find_pw_wrap {height: 100vh;}
.find_pw_wrap .screen_container {flex: 1; display: flex; flex-direction: column; padding-bottom: 60px; }
.find_pw_wrap .screen_inner {flex: 1; display: flex; flex-direction: column; max-width: 500px; }

#f_receive_pw {flex: 1; display: flex; flex-direction: column; position: relative;}
#f_receive_pw .form_input_group {flex: 1;}
/* .find_pw_wrap .button_group {position: absolute; bottom: 0; left: 0; width: 100%; } */
.find_pw_wrap .inq_email {text-align: center; font-size: 0; }
.find_pw_wrap .inq_email a {border-bottom: 1px solid #000; font-size: 14px; font-weight: 500;}



/** menu */
#open_menu {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 300; }
#open_menu .menu_back {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); }
#open_menu .menu_bar_wrap {display: flex; justify-content: flex-end; position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); width: 100%; max-width: 1000px; height: 100%;}
#open_menu .menu_bar_wrap > .back {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 301;}
#open_menu .menu_bar {display: flex; flex-direction: column; position: relative; width: 100%; max-width: 440px; height: 100%; background: #FFF; z-index: 305;}

#open_menu .menu_bar .close_area {display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 15px 20px; /* margin-bottom: 20px; */ }
#open_menu .menu_bar .close_area .close {position: relative; left: -5px; padding: 5px; font-size: 0; }
#open_menu .menu_bar .close_area img {width: 15px; height: 15px; object-fit: contain;}

#open_menu .menu_bar .close_area .pro_member {display: none; align-items: center; gap: 10px; padding: 0 15px; height: 24px; border-radius: 24px; background: #000;}
#open_menu .menu_bar .close_area .pro_member > div {display: flex; justify-content: center; align-items: center; gap: 5px; }
#open_menu .menu_bar .close_area .pro_member .whole_group .rest_img {width: 100%; max-width: 18px; font-size: 0;}
#open_menu .menu_bar .close_area .pro_member .eighth_group .rest_img {width: 100%; max-width: 8px; font-size: 0;}
#open_menu .menu_bar .close_area .pro_member .rest_img svg {fill: #FFF}
#open_menu .menu_bar .close_area .pro_member > div span {color: #FFF; font-size: 13px; font-weight: bold;}

#open_menu .menu_bar .member_info {margin-top: 20px; }
#open_menu .menu_bar .info_area {display: flex; align-items: center; gap: 10px; position: relative; margin-bottom: 30px; }
#open_menu .menu_bar .info_wrap {flex: 1; }
#open_menu .menu_bar .info_wrap .info {display: flex; align-items: center; gap: 8px; }
#open_menu .menu_bar .info_wrap .info .img {position: relative; width: 34px; height: 34px; border-radius: 34px; overflow: hidden; }
#open_menu .menu_bar .info_wrap .info .img.no_img {background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA}
#open_menu .menu_bar .info_wrap .info .img img {width: 100%; height: 100%; object-fit: cover; }
#open_menu .menu_bar .info_wrap .info .nick {font-size: 16px; font-weight: 700; word-break: break-word; word-wrap: nowrap; }
#open_menu .menu_bar .info_wrap .logout_button {padding: 8px 10px; border: 1px solid #D8D9DB; border-radius: 8px; color: #747474; font-size: 14px; font-weight: 500;}
#open_menu .menu_bar .info_area .follow_wrap {display: flex; align-items: center; gap: 15px; position: relative; }
#open_menu .menu_bar .info_area .follow_wrap span {display: block; width: 1px; height: 14px; background: #EDEDED; }
#open_menu .menu_bar .info_area .follow_wrap dl {display: flex; flex-direction: column; align-items: center; gap: 5px; }
#open_menu .menu_bar .info_area .follow_wrap dl dt {color: #747474; font-size: 11px; font-weight: 500; }
#open_menu .menu_bar .info_area .follow_wrap dl dd {font-size: 16px; font-weight: 600; }
#open_menu .menu_bar .membership_area {display: flex; align-items: center; padding: 15px; border-radius: 6px; background: #F6F7F8; color: #4D5363; font-size: 15px; }
#open_menu .menu_bar .membership_area .level {font-weight: 700;}
#open_menu .menu_bar .membership_area .period {flex: 1; text-align: right; font-weight: 500; }

#open_menu .menu_bar .menu_body {flex: 1; margin-top: 20px; padding-bottom: 100px; overflow: auto;}
#open_menu .menu_bar .menu_body > .menu_group {padding: 25px 0 0; margin: 0 20px; }
#open_menu .menu_bar .menu_body > .menu_group h4 {padding: 0 0 10px; font-size: 17px; }
#open_menu .menu_bar .menu_body > .menu_group ul li a {position: relative; display: block; padding: 10px 0; color: #3D3D3D; font-size: 16px; font-weight: 500; }
#open_menu .menu_bar .menu_body > .menu_group ul li a:after {display: block; clear: both; content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 8px; height: 14px; background: url('/include/images/member_menu_arrow.png') no-repeat center/contain;}
#open_menu .menu_bar .menu_body > .menu_group:first-child {padding: 30px 0 0; border-top: 1px solid #F2F2F2; }

#open_menu .menu_bar .shop {}
#open_menu .menu_bar .shop button {
	display: flex; justify-content: center; align-items: center; gap: 10px; 
	position: absolute; bottom: 50px; left: 50%; transform: translate(-50%, 0); 
	width: 100%; max-width: 180px; height: 48px; padding: 0 12px; border-radius: 24px; background: #C5211F; color: #FFF; font-size: 15px; font-weight: 600; letter-spacing: -0.04em; 
	z-index: 100;
}



/** main_header */
#main_header {position: sticky; top: 0; left: 0; width: 100%; background: #000; color: #FFF; z-index: 150;}
#main_header .top {display: flex; align-items: center; flex-wrap: wrap; gap: 10px; position: relative; height: 48px; }
#main_header .logo {order: 1; padding: 10px 0; }
#main_header .logo img {width: 85px; height: auto;}
#main_header .top_menu {order: 3; right: 20px; text-align: right; }
#main_header .top_menu .mo_menu {padding: 3px 0; }
#main_header .top_menu .mo_menu:before {clear: both; content: ''; display: block; width: 16px; height: 2px; border-radius: 2px; background: #FFF; }
#main_header .top_menu .mo_menu:after {clear: both; content: ''; display: block; width: 16px; height: 2px; border-radius: 2px; background: #FFF; }
#main_header .top_menu .mo_menu span {display: block; width: 16px; height: 2px; margin: 4px 0; border-radius: 2px; background: #FFF; font-size: 0;}
#main_header .top_menu a {color: #FFF; font-size: 12px; font-weight: 500;}
#main_header .top_menu ul li {display: flex; justify-content: center; align-items: center; width: 50px; padding: 8px 0; border-radius: 10px; }
#main_header .top_menu ul li span {text-align: center; color: #FFF; font-size: 12px; font-weight: 500;}
#main_header .top_menu ul li.app_li {background: #FFF;}
#main_header .top_menu ul li.app_li span {color: #000;}
#main_header .hd_tab {flex: 1; order: 2; display: flex; justify-content: center; align-items: center; min-width: 120px; }
#main_header .hd_tab ul {display: flex; align-items: center; flex-wrap: wrap; gap: 20px;}
#main_header .hd_tab ul li {position: relative; }
#main_header .hd_tab ul li:nth-child(1){order: 1;}
#main_header .hd_tab ul li:nth-child(2){order: 2;}
#main_header .hd_tab ul li:nth-child(3){order: 3;}
#main_header .hd_tab ul li:nth-child(4){order: 0; display: none;}
#main_header .hd_tab ul li a {display: block; padding: 12px 0; text-align: center; color: #B4B4B4; font-size: 16px; font-weight: bold;}
#main_header .hd_tab ul li.on:after {display: block; clear: both; content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #FFF;}
#main_header .hd_tab ul li.on a {color: #FFF; }

#main_header .login_button {font-size: 0;}
#main_header .login_button i {color: #FFF; font-size: 24px; font-weight: 500;}

.sub_wrap #main_header .top {padding-top: 5px; padding-bottom: 5px; }



/** footer */
footer {background: #000;}
footer .ft_top {border-bottom: 1px solid #4C4C4C; }
footer .ft_top ul {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
footer .ft_top ul li a {display: block; color: #999; padding: 20px; font-size: 14px; font-weight: 600;}
footer .ft_info {padding: 25px 20px; color: #999; }
footer .ft_info ul {display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex-wrap: wrap; margin-bottom: 10px; }
footer .ft_info ul li {position: relative; line-height: 1.5em; font-size: 15px; font-weight: 500;}
footer .ft_info ul li:before {display: none; clear: both; content: ''; width: 1px; height: 10px; background: #4D4C4C; margin: 0 10px; font-size: 0;}
footer .ft_info ul li:first-child:before {display: none;}
footer .ft_info small {display: block; line-height: 1.5em; margin-top: 35px; text-align: center; color: #777; font-size: 14px; font-weight: 500; }




/** main */
.main_wrap {position: relative; display: flex; flex-direction: column; min-height: 90vh;}
.main_wrap.is_app {height: 100vh; overflow: hidden; }
.container {flex: 1; display: flex; flex-direction: column; overflow: auto; overscroll-behavior-y: none;}
.tab_content_wrap {flex: 1; display: flex; flex-direction: column; }
.tab_content_wrap .tab_content {flex: 1; display: none; flex-direction: column; }

.main_wrap .tab_content .cont_title {position: relative; }
.main_wrap .tab_content .cont_title > div {display: flex; padding: 20px 0; }
.main_wrap .tab_content .cont_title h3 {position: relative; font-size: 18px; font-weight: bold; }
.title_more_button {position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding: 5px; font-size: 0; z-index: 50;}
.title_more_button img {width: 8px; height: 13px; object-fit: contain}
.title_more_button span {display: none; }

.is_web .container {overflow: initial;}


/** main - contents */
#main_contents {padding-bottom: 80px; }

#main_contents .refresh_button {display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; height: 48px; border: 1px solid #EDEDED; border-radius: 10px; background: #FFF; }
#main_contents .refresh_button img {width: 13px; }
#main_contents .refresh_button span {color: #888; font-size: 15px; font-weight: 500;}

#main_contents .author_info {display: flex; align-items: center; gap: 7px;}
#main_contents .author_info .author_img {position: relative; min-width: 26px; border-radius: 100%; overflow: hidden; }
#main_contents .author_info .author_img.no_img {background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA;}
#main_contents .author_info .author_img:after {display: block; clear: both; content: ''; padding-bottom: 100%; border-radius: 100%; }
#main_contents .author_info .author_img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
#main_contents .author_info .author_nick {font-size: 14px;}

#main_contents .media_cont {position: relative; padding-bottom: 45px; background: url('/include/images/media_contents_bg.png') no-repeat bottom center/ 100% 46px; }
#main_contents .media_cont .cont_title {background: #000; color: #FFF;}
#main_contents .media_cont .cont_con {position: relative; background: #000; }
#main_contents .media_cont .cont_con .inner {padding: 0; }
#main_contents .media_cont .bg {position: absolute; bottom: 0; left: 0; width: 100%; height: 45px; }
#main_contents .media_cont .bg svg {width: 100%; height: 45px; }

#main_contents .media_cont .swiper-wrapper {}
#main_contents .media_cont .media-slide {display: flex; flex-direction: column; width: calc((100% - 20px) - 15px - 25px); border-radius: 12px;}
#main_contents .media_cont .media-slide.empty_slide {position: relative; width: 100% !important; max-height: 300px;}
#main_contents .media_cont .note_img {position: relative; width: 100%; border-radius: 10px; overflow: hidden;}
#main_contents .media_cont .note_img:before {display: block; clear: both; content: ''; padding-bottom: calc((180 / 330) * 100%);}
#main_contents .media_cont .note_img.no_img:before {background: rgba(197,0,40); }
#main_contents .media_cont .note_img .audio_note_img {position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; font-size:18px; color:#fff; font-weight:600;}
#main_contents .media_cont .note_img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
#main_contents .media_cont .note_info {margin-top: 10px; overflow: hidden;}
#main_contents .media_cont .note_info .note_top {display: flex; justify-content: space-between; align-items: center; }
#main_contents .media_cont .note_info .note_top .created_at {color: #C4C4C4; font-size: 12px; font-weight: 500;}
#main_contents .media_cont .note_info .author_info .author_nick {color: #FFF; }
#main_contents .media_cont .note_info .note_title {display: block; margin-top: 8px; color: #FFF; font-size: 14px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
#main_contents .media_cont .note_info .cnt_info {display: flex; justify-content: space-between; margin-top: 15px; }
#main_contents .media_cont .note_info .cnt_info > ul {display: flex; justify-content: space-between; gap: 19px; }
#main_contents .media_cont .note_info .cnt_info > ul li {display: flex; align-items: center; gap: 9px; }
#main_contents .media_cont .note_info .cnt_info img {width: 15px; height: 15px;; object-fit: contain;}
#main_contents .media_cont .note_info .cnt_info span {color: #FFF; font-size: 13px; }
#main_contents .media_cont .swiper-pagination {position: static; padding-top: 20px; font-size: 0;}
#main_contents .media_cont .swiper-pagination .swiper-pagination-bullet {width: 5px; height: 5px; margin: 0 2px; border-radius: 3px; background: #C2C3C6; opacity: 1}
#main_contents .media_cont .swiper-pagination .swiper-pagination-bullet-active {width: 18px; background: #FFF; }
#main_contents .media_cont .swiper-pagination.swiper-pagination-lock {display: block; }

#main_contents .masonry_cont {display: flex; flex-wrap: wrap; position: relative; background: #F7F7F7; }
#main_contents .masonry_cont > div:not(.store_banner) {width: 100%; margin-bottom: 8px; break-inside: avoid;}
#main_contents .masonry_cont > div .wrap {padding: 30px 20px; background: #FFF; }
#main_contents .masonry_cont > div.concert {order: 1; margin-bottom: 0; }
#main_contents .masonry_cont > div.banner {order: 2; margin-bottom: 0;}
#main_contents .masonry_cont > .news {order: 3; }
#main_contents .masonry_cont > .wow {order: 4; }
#main_contents .masonry_cont > .today_prac {order: 5; }
#main_contents .masonry_cont > div.quiz {order: 6; margin-bottom: 0;}
#main_contents .masonry_cont .cont_title {display: flex; justify-content: flex-start; align-items: center; position: relative; padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid #EDEDED; }
#main_contents .masonry_cont .cont_title h3 {padding: 0; font-size: 18px; }
#main_contents .masonry_cont .cont_title .cont_more {position: absolute; right: 0; color: #888; font-size: 13px; font-weight: 500;}

#main_contents .masonry_cont > .news .cont_con .news_ul {display: flex; flex-wrap: wrap; gap: 0 10px; margin-top: -15px; padding-bottom: 20px; }
#main_contents .masonry_cont > .news .cont_con .news_ul .empty_li {display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 15px; padding: 60px 0; font-weight: 500;}
#main_contents .masonry_cont > .news .cont_con .news_content {width: 100%; padding: 15px 0; border-top: 1px solid #E9EAF0; }
#main_contents .masonry_cont > .news .cont_con .img_wrap {display: none; position: relative; border-radius: 6px; overflow: hidden; margin-bottom: 10px; }
#main_contents .masonry_cont > .news .cont_con .img_wrap.no_img {background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA; }
#main_contents .masonry_cont > .news .cont_con .img_wrap:before {display: block; clear: both; content: ''; 
	/* padding-bottom: calc((13/17) * 100%); */
	padding-bottom: calc((110/130) * 100%);
}
#main_contents .masonry_cont > .news .cont_con .img_wrap img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
#main_contents .masonry_cont > .news .cont_con .text_wrap {display: flex; align-items: center; gap: 10px; }
#main_contents .masonry_cont > .news .cont_con .text_wrap h4 {flex: 1; font-size: 14px; font-weight: bold;}
#main_contents .masonry_cont > .news .cont_con .text_wrap h6 {color: #B4B4B4; font-size: 12px; font-weight: 400; }

#main_contents .masonry_cont > .news .cont_con .news_content:nth-child(-n+2) {width: calc((100% - 10px) / 2); border-top: 0; }
#main_contents .masonry_cont > .news .cont_con .news_content:nth-child(-n+2) .img_wrap {display: block;}
#main_contents .masonry_cont > .news .cont_con .news_content:nth-child(-n+2) .text_wrap {display: block;}
#main_contents .masonry_cont > .news .cont_con .news_content:nth-child(-n+2) .text_wrap h4 {-webkit-line-clamp: 2;}
#main_contents .masonry_cont > .news .cont_con .news_content:nth-child(-n+2) .text_wrap h6 {margin-top: 8px;}

#main_contents .masonry_cont > .banner .wrap {padding: 20px; }
#main_contents .masonry_cont > .banner .ads_swiper {border-radius: 6px; background: #FFF; }
#main_contents .masonry_cont > .banner .ads_swiper .swiper-slide {position: relative;}
#main_contents .masonry_cont > .banner .ads_swiper .swiper-slide:before {display: block; clear: both; content: ''; padding-bottom: calc((14 / 35) * 100%);}
#main_contents .masonry_cont > .banner .ads_swiper .swiper-slide .slide_content {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#main_contents .masonry_cont > .banner .ads_swiper .swiper-slide .slide_content img {width: 100%; height: 100%; object-fit: cover; }
#main_contents .masonry_cont > .banner .ads_swiper .ads_pagination {display: flex; justify-content: flex-end; align-items: center; bottom: 10px; left: auto; right: 10px; width: auto; }
#main_contents .masonry_cont > .banner .ads_swiper .ads_pagination .wrap {display: flex; align-items: center; padding: 3px 7px; border-radius: 50px; background: rgba(0,0,0,0.7); color: #FFF; }
#main_contents .masonry_cont > .banner .ads_swiper .ads_pagination span {font-size: 10px; font-weight: 500; letter-spacing: 0.08em; opacity: 0.5; }
#main_contents .masonry_cont > .banner .ads_swiper .ads_pagination .swiper-pagination-current {opacity: 1; }

#main_contents .masonry_cont > .concert .concert_swiper {}
#main_contents .masonry_cont > .concert .concert_swiper .concert_poster {position: relative; border-radius: 6px; overflow: hidden; }
#main_contents .masonry_cont > .concert .concert_swiper .concert_poster:before {display: block; clear: both; content: ''; 
	/* padding-bottom: calc((227 / 170) * 100%); */
	padding-bottom: calc((560 / 400) * 100%);
}
#main_contents .masonry_cont > .concert .concert_swiper .concert_poster img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
#main_contents .masonry_cont > .concert .concert_swiper .concert_info {margin: 10px 0 0; }
#main_contents .masonry_cont > .concert .concert_swiper .concert_info .title {font-size: 14px; font-weight: bold; }
#main_contents .masonry_cont > .concert .concert_swiper .concert_info .place {margin-top: 6px; font-size: 12px; }
#main_contents .masonry_cont > .concert .concert_swiper .concert_info .period {margin-top: 6px; font-size: 11px; }
#main_contents .masonry_cont > .concert .concert_swiper .swiper-pagination {display: flex; justify-content: center; align-items: center; gap: 5px; position: static; margin-top: 30px; }
#main_contents .masonry_cont > .concert .concert_swiper .swiper-pagination .swiper-pagination-bullet {width: 5px; height: 5px; margin: 0; border-radius: 5px; background: #DEDEDE; opacity: 1; }
#main_contents .masonry_cont > .concert .concert_swiper .swiper-pagination .swiper-pagination-bullet-active {width: 20px; background: #C5211F; }
#main_contents .masonry_cont > .concert .concert_swiper .empty_li {
	display: flex; justify-content: center; align-items: center; 
	width: 100% !important; margin: 0 !important; padding: 60px 0; font-weight: 500;
}


#main_contents .masonry_cont > .wow .cont_con .wow_ul {display: flex; flex-wrap: wrap; gap: 20px 10px; padding-bottom: 20px; }
#main_contents .masonry_cont > .wow .cont_con .wow_ul > li {width: 100%; }
#main_contents .masonry_cont > .wow .cont_con .wow_ul > li a {display: block; }
#main_contents .masonry_cont > .wow .cont_con .wow_ul > li .img_wrap {position: relative; border-radius: 6px; overflow: hidden; }
#main_contents .masonry_cont > .wow .cont_con .wow_ul > li .img_wrap:before {display: block; clear: both; content: ''; 
	/* padding-bottom: calc((18/35) * 100%); */
	padding-bottom: calc((9/16) * 100%);
}
#main_contents .masonry_cont > .wow .cont_con .wow_ul > li .img_wrap img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
#main_contents .masonry_cont > .wow .cont_con .wow_ul > li .text_wrap {margin-top: 10px; font-size: 14px; }
#main_contents .masonry_cont > .wow .cont_con .wow_ul > li .text_wrap h4 {line-height: 1rem; }

#main_contents .masonry_cont > .wow .cont_con .wow_ul > li:nth-child(-n+2) {width: calc((100% - 10px) / 2);}
#main_contents .masonry_cont > .wow .cont_con .wow_ul > li:nth-child(-n+2) .img_wrap:before {
	/* padding-bottom: calc((19/17) * 100%);
	padding-bottom: calc((146 / 110) * 100%);  */
	padding-bottom: calc((325 / 230) * 100%);
}
#main_contents .masonry_cont > .wow .cont_con .wow_ul > li:nth-child(-n+2) .text_wrap h4 {-webkit-line-clamp: 2;}
#main_contents .masonry_cont > .wow .cont_con .wow_ul li.empty_list {display: flex; justify-content: center; padding: 40px 0; text-align: center; font-weight: 500; }

#main_contents .masonry_cont > .today_prac .cont_con .comp_prac_ul {display: flex; flex-wrap: wrap; gap: 0 20px;}
#main_contents .masonry_cont > .today_prac .cont_con .comp_prac_ul > li {width: calc((100% - 20px) / 2);}
#main_contents .masonry_cont > .today_prac .cont_con .comp_prac_ul > li .img_wrap {position: relative; overflow: hidden; }
#main_contents .masonry_cont > .today_prac .cont_con .comp_prac_ul > li .img_wrap:before {display: block; clear: both; content: ''; padding-bottom: 100%;}
#main_contents .masonry_cont > .today_prac .cont_con .comp_prac_ul > li .img_wrap img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
#main_contents .masonry_cont > .today_prac .cont_con .comp_prac_ul > li .pf_info {display: flex; align-items: center; gap: 10px; margin-top: 10px; }
#main_contents .masonry_cont > .today_prac .cont_con .comp_prac_ul > li .pf_info .pf_img {position: relative; width: 32px; border-radius: 32px; overflow: hidden;}
#main_contents .masonry_cont > .today_prac .cont_con .comp_prac_ul > li .pf_info .pf_img.no_img {background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA;}
#main_contents .masonry_cont > .today_prac .cont_con .comp_prac_ul > li .pf_info .pf_img:before {display: block; clear: both; content: ''; padding-bottom: 100%; }
#main_contents .masonry_cont > .today_prac .cont_con .comp_prac_ul > li .pf_info .pf_img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
#main_contents .masonry_cont > .today_prac .cont_con .comp_prac_ul > li .pf_info .pf_nick {flex: 1; font-size: 14px; font-weight: 600; }
#main_contents .masonry_cont > .today_prac .cont_con .comp_prac_ul > li.empty_li {display: flex; justify-content: center; width: 100%; padding: 60px 0; text-align: center; font-weight: 500; }

#main_contents .masonry_cont > .quiz .cont_con .quiz_ul {display: flex; align-items: center; gap: 10px; }
#main_contents .masonry_cont > .quiz .cont_con .quiz_ul li {
	flex: 1; display: flex; justify-content: center; align-items: center; gap: 12px; padding: 12px 0; border-radius: 10px; background: #FFF; 
	-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
	-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
}
#main_contents .masonry_cont > .quiz .cont_con .quiz_ul li i {display: block; width: 27px; height: 27px; border-radius: 8px; }
#main_contents .masonry_cont > .quiz .cont_con .quiz_ul li span {font-size: 14px; font-weight: bold; }
#main_contents .masonry_cont > .quiz .cont_con .quiz_ul .quiz_hear i {background: url('/include/images/quiz_hear_icon.png') no-repeat center / cover, #188FFD; }
#main_contents .masonry_cont > .quiz .cont_con .quiz_ul .quiz_music i {background: url('/include/images/quiz_music_icon.png') no-repeat center / cover, #FEAA27; }



.cat_summary {background: #B7D589;}
svg {width: 100%; height: auto; }



/** main - contents - news */
.news_list_wrap {padding-bottom: 75px; background: #FFF;}
.news_list_wrap .more_button {padding-bottom: 0; }
.news_list {flex: 1; display: flex; flex-direction: column; }
.news_list > li {position: relative; padding: 20px 0; border-bottom: 1px solid #EDEDED; background: #FFF; }
.news_list > li .wrap {display: flex; gap: 10px;}
.news_list > li:nth-child(1) {border-top: 0;}
.news_list > li .text_wrap {flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 5px 0; }
.news_list > li .title {line-height: 1.2em; font-size: 16px; font-weight: bold; -webkit-line-clamp: 2; }
.news_list > li .created_at {color: #888; font-size: 13px; font-weight: 500;}
.news_list > li .news_img {position: relative; width: 130px; border-radius: 10px; background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA; overflow: hidden; }
.news_list > li .news_img:after {display: block; clear: both; content: ''; padding-bottom: calc((110 / 130) * 100%); }
.news_list > li .news_img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.news_list > li.empty_li {width: 100%; justify-content: center; align-items: center; padding: 80px 0; border-bottom: 0; background: none; text-align: center; }


.strap_calender_wrap {display: none; }
.strap_calender_wrap.on {display: block; }



/** main - contents - concert - list */
.concert_list_wrap {padding-bottom: 75px; }

.concert_list_wrap .strap_calender {padding-bottom: 20px; border-bottom: 1px solid #EDEDED; }
.concert_list_wrap .strap_swiper {background: #FFF; }
.concert_list_wrap .strap_swiper .swiper-slide .date_wrap {display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: 15px; cursor: pointer;}
.concert_list_wrap .strap_swiper .swiper-slide .week_days {margin-bottom: 10px; }
.concert_list_wrap .strap_swiper .swiper-slide .week_date {width: 100%; max-width: 36px; padding: 4px 0; border-radius: 40px; font-weight: bold;}
.concert_list_wrap .strap_swiper .swiper-slide .date_wrap.active .week_date {background: #EDEDED; }

.concert_list {}
.concert_list > li {display: flex; justify-content: flex-start; align-items: center; padding: 20px 0; border-bottom: 1px solid #EDEDED; background: #FFF; }
.concert_list > li.empty_li {justify-content: center; align-items: center; padding: 80px 0; }
.concert_list > li .wrap {flex: 1; display: flex; gap: 10px; }
.concert_list > li .concert_img {position: relative; width: 110px; border-radius: 10px; background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA; overflow: hidden;}
.concert_list > li .concert_img:before {
	display: block; clear: both; content: ''; 
	/* padding-bottom: calc((146 / 110) * 100%); */ 
	padding-bottom: calc((560 / 400) * 100%); 
}
.concert_list > li .concert_img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.concert_list > li .concert_info {flex: 1; padding-top: 5px; }
.concert_list > li .concert_info .info_title {line-height: 1.25em; font-size: 16px; font-weight: bold; }
.concert_list > li .concert_info .info_place {line-height: 1rem; padding: 8px 0; font-size: 13px; font-weight: 500; }
.concert_list > li .concert_info .info_period {line-height: 1rem; color: #888; font-size: 13px; }

.concert_list_wrap .more_button {padding-bottom: 0; }


/** main - contents - concert - view */
.concert_view_wrap {width: 100%; max-width: 1000px; margin: 0 auto; }
.concert_view_wrap .view_top {padding: 20px;}
.concert_view_wrap .view_top .concert_img {position: relative; max-width: 400px; margin: 0 auto; border-radius: 6px; background: #F0F0F0; 
	-webkit-box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.15);
	box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.15);

}
.concert_view_wrap .view_top .concert_img:before {
	display: block; clear: both; content: ''; 
	/* padding-bottom: calc((325 / 230) * 100%); */ padding-bottom: calc((560 / 400) * 100%); 
}
.concert_view_wrap .view_top .concert_img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 6px; object-fit: cover; border: none;}
.concert_view_wrap .view_top .concert_title {width: 100%; margin-top: 20px; margin-bottom: 10px; text-align: center; font-size: 18px; font-weight: bold; }
.concert_view_wrap .view_top .concert_info {margin: 40px 0 0; }
.concert_view_wrap .view_top .concert_info > .header {
	display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-bottom: 20px; margin-bottom: 15px; border-bottom: 1px solid #E9EAF0; 
	font-size: 16px; font-weight: bold; 
}
.concert_view_wrap .view_top .concert_info > .header .subject {flex: 1; font-size: 18px; word-wrap: break-word; word-break: break-word; }
.concert_view_wrap .view_top .concert_info > .header .link {display: block; text-align: center; padding: 6px 12px; border: 1px solid #C5211F; border-radius: 20px; color: #C5211F; font-size: 14px; font-weight: 400;}
.concert_view_wrap .view_top .concert_info ul {display: flex; flex-direction: column; gap: 30px; width: 100%; }
.concert_view_wrap .view_top .concert_info ul li {display: flex; width: 100%; }
.concert_view_wrap .view_top .concert_info .info_label {flex: 3; line-height: 1.25em; color: #888; font-size: 16px; font-weight: 500; }
.concert_view_wrap .view_top .concert_info .info_data {flex: 7; line-height: 1.25em; font-size: 16px; }
.concert_view_wrap .view_top .concert_info .info_data .open_date {color: #C5211F; }
.concert_view_wrap .view_bottom {background: #FFF; padding: 30px 20px;}
.concert_view_wrap .view_bottom > .header {display: none; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #E9EAF0; font-size: 16px; font-weight: bold; }
.concert_view_wrap .view_bottom > .view_content {word-break: break-word; word-wrap: break-word; }

.concert_view_nav_header {margin-top: 30px; margin-bottom: 20px; }
.concert_view_nav_header .nav_inner {padding: 0 0 20px; border-bottom: 2px solid #000; }
.concert_view_nav_header .nav_inner h2 {font-size: 18px; }

/* .is_web .concert_view_wrap .view_top .concert_title {display: none;} */
.is_web .concert_view_wrap .view_bottom {padding-bottom: 150px; }

.is_web .concert_view_nav_header {display: none; }
.is_web .concert_view_nav_header .nav_inner h2 .no_web {display: none; }
.is_web .concert_view_nav_header .nav_inner h2 .no_app {display: block; }



/** main - contents - wow */
#wow_sch {padding-bottom: 30px; }
.wow_list {display: flex; flex-wrap: wrap; padding: 0 20px; }
.wow_list > li {display: flex; align-items: start; gap: 10px; width: 100%; padding: 20px 0; border-bottom: 1px solid #EDEDED; background: #FFF; }
.wow_list > li .wow_img {position: relative; width: 45%; max-width: 180px; border-radius: 6px; background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA; overflow: hidden; }
.wow_list > li .wow_img:after {display: block; clear: both; content: ''; 
	/* padding-bottom: calc((146 / 110) * 100%); */
	padding-bottom: calc((325 / 230) * 100%);
}
.wow_list > li .wow_img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.wow_list > li .wow_text {flex: 1; }
.wow_list > li .wow_title {line-height: 1.2em; font-size: 16px; font-weight: bold; word-break: keep-all; word-wrap: break-word; /* white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  */}
.wow_list > li .wow_info {margin-top: 8px; color: #3D3D3D; font-size: 13px; word-break: break-word; word-wrap: break-word; }

.wow_list > li.wow_type2 {flex-direction: column; gap: 6px; }
.wow_list > li.wow_type2 .wow_img {width: 100%; max-width: unset; }
.wow_list > li.wow_type2 .wow_img:after {
	/* padding-bottom: calc((146/350) * 100%); */
	padding-bottom: calc((9/16) * 100%);
}
.wow_list > li.wow_type2 .wow_title {}
.wow_list > li.wow_type2 .wow_info {display: none; }
.wow_list > li.empty_li {width: 100%; padding: 80px 0; text-align: center; }

.wow_list_wrap .more_button {padding-bottom: 80px; }



.wow_view_wrap .view_top {padding: 20px; }
.wow_view_wrap .view_top .ifrm_wrap {position: relative; }
.wow_view_wrap .view_top .ifrm_wrap:before {display: block; clear: both; content: ''; padding-bottom: calc((9/16) * 100%);}
.wow_view_wrap .view_top .ifrm_wrap iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.wow_view_wrap .view_top .wow_img {
	position: relative; 
	max-width: 230px; margin: 0 auto; border-radius: 10px; background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA;
	-webkit-box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.15);
	box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.15);
}
.wow_view_wrap .view_top .wow_img:after {display: block; clear: both; content: ''; padding-bottom: calc((325 / 230) * 100%);}
.wow_view_wrap .view_top .wow_img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 6px; object-fit: cover; overflow: hidden;}

.wow_view_wrap .view_bottom {padding: 20px;}
.wow_view_wrap .view_bottom .header {margin-bottom: 20px; padding-bottom: 24px; font-size: 18px; font-weight: bold; }
.wow_view_wrap .view_bottom .view_content {color: #4C4C4C; font-size: 15px; word-break: break-word; }

.is_web .wow_nav_header {display: none;}
.is_web .wow_view_wrap {padding-top: 30px; padding-bottom: 50px; }
.is_web .wow_view_wrap .view_top {padding: 0 0 20px; }



/** main - contents - quiz */
.quiz_list {display: flex; flex-wrap: wrap;}
.quiz_list > li {}
.quiz_list > li:not(.empty_li) {width: 100%; padding: 20px; border-bottom: 1px solid #EDEDED; background: #FFF; }
.quiz_list > li.empty_li {display: flex; justify-content: center; align-items: center; width: 100%; text-align: center; padding: 40px 0; }
.quiz_list > li > div {display: flex; gap: 10px;}
.quiz_list > li > div .icon {width: 22px; height: 22px; border-radius: 6px; font-size: 0; vertical-align: middle; }
.quiz_list > li > div .hear_icon {background: url('/include/images/quiz_hear_icon.png') no-repeat center / cover, #188FFD; }
.quiz_list > li > div .music_icon {background: url('/include/images/quiz_music_icon.png') no-repeat center / cover, #FEAA27; }
.quiz_list > li .quiz_subject {line-height: 22px; font-size: 15px; font-weight: bold; vertical-align: middle; }

.quiz_view_wrap {}
.quiz_view_wrap .countdown_wrap {padding: 20px 0; margin: 0 auto; }
.quiz_view_wrap .qcont_wrap {}
.quiz_view_wrap .qcont_wrap p {line-height: 1.5em; padding: 20px 0; text-align: center; font-size: 16px; font-weight: bold; word-break: keep-all; }
.quiz_view_wrap .qcont_wrap .image_wrap {position: relative; width: 100%; max-width: 600px; margin: 0 auto; border-radius: 10px; background: #F0F0F0; overflow: hidden;}
.quiz_view_wrap .qcont_wrap .image_wrap:after {display: block; clear: both; content: ''; padding-bottom: calc((192 / 350) * 100%); }
.quiz_view_wrap .qcont_wrap .image_wrap img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;}
.quiz_view_wrap .qcont_wrap .ans_group {display: flex; gap: 10px; flex-wrap: wrap; margin-top: 40px;}
.quiz_view_wrap .qcont_wrap .ans_group button {width: calc(50% - 5px); padding: 15px; border: 1px solid #E9EAF0; border-radius: 10px; font-size: 15px; font-weight: bold; }
.piano_wrap {width: 100%; max-width: 600px; margin: 0 auto; font-size: 0;}
.piano_wrap img {width: 100%; height: auto; }

.audio_wrap {width: 100%; max-width: 600px; margin: 0 auto; padding-top: 40px;}
.audio_wrap button {display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; padding: 10px 0; border: 1px solid #000; border-radius: 10px;}
.audio_wrap button img {width: 23px; height: 23px; object-fit: contain; }
.audio_wrap button span {font-size: 15px; font-weight: bold; }

.is_web .quiz_view_wrap {padding-bottom: 150px; }



/** main - contents - quiz - modal */
.quiz_modal {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 105;}
.quiz_modal .modal_back {position: absolute; top: 0; left: 0; width: 100%; height: 100%;  background: rgba(0,0,0,0.7);}
.quiz_modal .modal_box_wrap {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 580px; }
.quiz_modal .modal_box {position: relative; border-radius: 10px; background: #FFF; }
.quiz_modal .modal_box .image {position: relative; top: 0; left: 50%; transform: translate(-50%, -50%); width: 30%; max-width: 120px; margin-bottom: 20px; }
.quiz_modal .modal_box .image:after {display: block; clear: both; content: ''; padding-bottom: 100%; margin-bottom: -50%; }
.quiz_modal .modal_box .content .text_wrap {padding: 0 20px; text-align: center;}
.quiz_modal .modal_box .content .text_wrap .info {margin-top: 15px; color: #C5211F;}
.quiz_modal .modal_box .content .button_wrap {display: flex; align-items: center; gap: 10px; padding: 30px 20px; }
.quiz_modal .modal_box .content .button_wrap button {flex: 1; display: flex; justify-content: center; align-items: center; height: 56px; padding: 0 10px; border: 1px solid #000; border-radius: 10px; font-size: 16px; font-weight: bold;}

.quiz_modal .modal_box.correct .image {background: url('/include/images/quiz_correct_img.png') no-repeat center/cover;}
.quiz_modal .modal_box.correct .button_wrap .next_button {border: 1px solid #51B97A; background: #51B97A; color: #FFF; }
.quiz_modal .modal_box.incorrect .image {background: url('/include/images/quiz_incorrect_img.png') no-repeat center/cover;}
.quiz_modal .modal_box.incorrect .button_wrap .next_button {border: 1px solid #D03955; background: #D03955; color: #FFF; }
.quiz_modal .modal_box.incorrect .button_wrap .close_button {border: 1px solid #BEBEBE; color: #BEBEBE; }



/** main - contents - note_search */
.sch_sort_wrap {margin-top: -10px; padding-top: 20px; }

.sch_sort_wrap .sort_category_wrap {flex-wrap: wrap; padding-bottom: 20px; }
.sch_sort_wrap .sort_category_wrap.inc_feedback {/* justify-content: space-between; */ gap: 3px; width: 100%; }

.sch_sort_wrap .sort_category_wrap .radio_label {flex: initial; }
.sch_sort_wrap .sort_category_wrap .radio_label div {height: 34px; padding: 0 17px; border: 1px solid #F5F5F5; border-radius: 34px; background: #F5F5F5; }
.sch_sort_wrap .sort_category_wrap .radio_label div span {color: #5F5F5F;}
.sch_sort_wrap .sort_follow_wrap {display: flex; }
.chk_wrap {display: flex; align-items: center; gap: 6px; position: relative; }
.chk_wrap input {position: absolute; bottom: 0; left: 0; margin: -1px; visibility: hidden; outline: none; }
.chk_wrap .chkbox {position: relative; width: 18px; height: 18px; border: 1px solid #B6B9C2; border-radius: 4px;}
.chk_wrap span {color: #3D3D3D; font-size: 15px; font-weight: 500;}
.chk_wrap input:checked ~ .chkbox {background: url('/include/images/chk_mark.png') no-repeat center / 12px auto, #B6B9C2; }


/** main - contents - note list 공통 */
.practice_note .note_list {background: #F3F5F8; }
.practice_note .note_list li {padding: 20px; border-bottom: 1px solid #EDEDED; background: #FFF; }

.practice_note .note_list li .item_top {display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.practice_note .note_list li .item_top .category {line-height: 20px; padding: 0 7px; border-radius: 5px; color: #FFF; font-size: 12px; font-weight: 600;}
.practice_note .note_list li .item_top .cate_plan {background: #FFC000; }
.practice_note .note_list li .item_top .cate_prac {background: #66BD2B; }
.practice_note .note_list li .item_top .cate_lesson {background: #7E42E0; }
.practice_note .note_list li .item_top .subj_wrap {flex: 1; }
.practice_note .note_list li .item_top .subject {line-height: normal; font-size: 16px; font-weight: 600; -webkit-line-clamp: 1; }
.practice_note .note_list li .item_top .created_at {margin-top: 2px; color: #C4C4C4; font-size: 11px; }
.practice_note .note_list li .item_top .icon_group {display: flex; align-items: center; gap: 12px;}
.practice_note .note_list li .item_top .icon_group img {width: auto; height: 12px; object-fit: cover; }

.practice_note .note_list li .item_mid {min-height: 1.2em; line-height: 1.2em; margin: 10px 0; color: #3D3D3D; font-size: 14px; }
.practice_note .note_list li .item_bot {display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.practice_note .note_list li .item_bot > div {display: flex; align-items: center; gap: 15px; }
.practice_note .note_list li .item_bot dl {display: flex; align-items: center; gap: 6px;}
.practice_note .note_list li .item_bot dt {font-size: 0; }
.practice_note .note_list li .item_bot dt img {width: auto; height: 12px; object-fit: cover; }
.practice_note .note_list li .item_bot dd {color: #888; font-size: 12px;}
.practice_note .note_list li .item_bot .like {cursor: pointer; }

.practice_note .note_list li .item_bot .member_info {display: flex; justify-content: flex-start; align-items: center; gap: 9px; }
.practice_note .note_list li .item_bot .member_info .mb_img {position: relative; width: 28px; border-radius: 100%; background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA; overflow: hidden;}
.practice_note .note_list li .item_bot .member_info .mb_img:after {display: block; clear: both; content: ''; padding-bottom: 100%;}
.practice_note .note_list li .item_bot .member_info .mb_img img {position: absolute; top: 0 ; left: 0; width: 100%; height: 100%; object-fit: cover;}
.practice_note .note_list li .item_bot .member_info .mb_nick_n_img {display: flex; align-items: center; gap: 5px; font-size: 0; }
.practice_note .note_list li .item_bot .member_info .mb_nick_n_img .mb_nick {font-size: 14px; font-weight: 600;}
.practice_note .note_list li .item_bot .member_info .mb_nick_n_img img {width: 15px; }

.practice_note .note_list li.empty_li {display: flex; justify-content: center; align-items: center; padding: 80px 0; text-align: center; border: 0; }

/** main - contents - note view 공통 */
.note_view_wrap {flex: 1; width: 100%; max-width: 1000px; margin: 0 auto; }
.note_view_wrap .view_top {display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 20px; }
.note_view_wrap .member_info {display: flex; align-items: center; gap: 8px; }
.note_view_wrap .member_info .mb_img {position: relative; width: 34px; border-radius: 100%; background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA; overflow: hidden;}
.note_view_wrap .member_info .mb_img:before {display: block; clear: both; content: ''; padding-bottom: 100%; }
.note_view_wrap .member_info .mb_img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.note_view_wrap .member_info .mb_nick {font-size: 16px; font-weight: bold; }
.note_view_wrap .follow_button_area {}
.note_view_wrap .follow_button_area > div {display: flex; align-items: center; gap: 10px; }
.note_view_wrap .follow_button_area button {
	display: flex; justify-content: center; align-items: center; gap: 5px; 
	min-width: 64px; height: 30px; padding: 0 10px; border-radius: 16px; border: 1px solid #FFF; font-size: 12px; font-weight: 500;
}
.note_view_wrap .follow_button_area button.red_button {border-color: #C5211F; color: #C5211F; }
.note_view_wrap .follow_button_area button.red_button img {max-width: 9px; height: auto; }
.note_view_wrap .follow_button_area button.border_button {border: 1px solid #C5211F; background: #FFF; color: #C5211F; }
.note_view_wrap .follow_button_area button.border_button img {max-width: 9px; height: auto; }
.note_view_wrap .follow_button_area button.gray_button {border-color: #EDEDED; color: #888; }
.note_view_wrap .follow_button_area button:disabled {cursor: default; }
.note_view_wrap .follow_button_area button img {width: 9px; }
.note_view_wrap .follow_button_area .wait_wrap {display: flex; }

.note_view_wrap .view_details {padding-top: 20px; }
.note_view_wrap .view_details .view_stat {font-size: 0;}
.note_view_wrap .view_details .view_stat .category {display: inline-block; width: 34px; line-height: 20px; border-radius: 6px; text-align: center; color: #FFF; font-size: 10px; font-weight: 600;}
.note_view_wrap .view_details .view_stat .category.cate_plan {background: #FFC000; }
.note_view_wrap .view_details .view_stat .category.cate_prac {background: #66BD2B; }
.note_view_wrap .view_details .view_stat .category.cate_lesson {background: #7E42E0; }
.note_view_wrap .view_details .view_stat .category.cate_feedback {background: #2E75B6; }

.note_view_wrap .view_details .created_at {margin-top: 15px; color: #747474; font-size: 13px; font-weight: 500;}
.note_view_wrap .view_details .view_song {line-height: 1.5em; padding-top: 15px; font-size: 17px; font-weight: bold; }
.note_view_wrap .view_details .view_subject {line-height: 1.3em; font-size: 16px; font-weight: 600; word-wrap: break-word; word-break: break-word; }
.note_view_wrap .view_details .view_content {line-height: 1.3em; margin-top: 20px; font-size: 13px; font-weight: 500; word-wrap: break-word; word-break: break-word; } 
.note_view_wrap .view_details .view_content img {display: block; width: 100%; max-width: 500px; }

.note_view_wrap .view_details .view_media {}
.note_view_wrap .view_details .view_media .ytb_box {position: relative; width: 100%; margin-top: 20px; font-size: 0; overflow: hidden;}
.note_view_wrap .view_details .view_media .ytb_box:before {display: block; clear: both; content: ''; padding-bottom: calc((9/16) * 100%)}
.note_view_wrap .view_details .view_media .ytb_box .wrap {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.note_view_wrap .view_details .view_media .ytb_box iframe {width: 100%; height: 100%; }
.note_view_wrap .view_details .view_media .audio {margin-top: 20px; }

.note_view_wrap .view_info {display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #E9EAF0; }
.note_view_wrap .view_info > div {display: flex; align-items: center; gap: 15px; }
.note_view_wrap .view_info dl {display: flex; align-items: center; gap: 6px;}
.note_view_wrap .view_info dt {font-size: 0; }
.note_view_wrap .view_info dt img {width: auto; height: 12px; object-fit: cover; }
.note_view_wrap .view_info dd {color: #888; font-size: 12px;}
.note_view_wrap .view_info .like {cursor: pointer}

.note_view_wrap .view_info .created_at {color: #888; font-size: 12px; font-weight: 500;}

.is_web .note_view_wrap .view_details .view_media .ytb_box {max-width: 500px; border-radius: 10px;}
.is_web .note_view_wrap .view_details .view_media .ytb_box:before {padding-bottom: calc((180 / 350) * 100%);}




/** main - contents - note write 공통 */
.note_write_wrap {flex: 1; display: flex; flex-direction: column; overflow: hidden; z-index: 100;}
.note_write_wrap .sub_page_content .top {display: flex; justify-content: center; align-items: center; }
.note_write_wrap .sub_page_content .top .today_at {/* margin-top: 30px;  */padding: 12px 25px; border-radius: 22px; border: 1px solid #F4F4F4; background: #FAFAFA; font-size: 13px; font-weight: 600;}
.note_write_wrap.today_note .sub_page_content .top .today_at {/* margin-bottom: 50px;  */}

.note_write_wrap #f_write_note {padding-bottom: 0; }
.note_write_wrap #f_write_note .editor_wrap {padding-bottom: 40px; }
.note_write_wrap #f_write_note .editor_head {padding: 0;}
.note_write_wrap #f_write_note .editor_body {padding: 0;}
.note_write_wrap #f_write_note .editor_body .input_area dl {padding: 0; }

.calendar_wrap#note_write_calendar {display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: -5px; z-index: 100; }
.calendar_wrap#note_write_calendar button {display: flex; justify-content: center; align-items: center; gap: 6px; }
.calendar_wrap#note_write_calendar span {line-height: 16px; color: #BDBDBD; font-size: 15px; }
.calendar_wrap#note_write_calendar img {width: 15px; height: auto; object-fit: contain;}

.note_write_wrap .button_area {padding-bottom: 40px; }
.note_write_wrap .button_area button {margin: 0; color: #FFF; font-size: 16px; font-weight: bold;}




/** main - contents - practice_note - list */


/** main - challenge */
#main_challenge .swiper-wrapper {margin-bottom: 20px; align-items: stretch;}
#main_challenge .swiper-slide {display: flex; flex-direction: column; height: auto; cursor: pointer}
#main_challenge .swiper-slide .card_img {position: relative; padding-bottom: calc(100% / 25 * 16); border-radius: 20px 20px 0 0; background: #D0D0D0; overflow: hidden; }
#main_challenge .swiper-slide .card_img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
#main_challenge .swiper-slide .card_img:after {display: block; clear: both; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10;}
#main_challenge .swiper-slide .card_img .card_tag {position: absolute; top: 20px; left: 20px; padding: 6px 15px; border-radius: 13px; background: #F00;color: #FFF; font-size: 12px; z-index: 15;}
#main_challenge .swiper-slide .card_img .card_period {position: absolute; bottom: 20px; right: 20px; color: #FFF; font-size: 12px; z-index: 15;}
#main_challenge .swiper-slide .card_content {flex: 1; padding: 0 20px 20px; border: 1px solid #E0E0E3; border-top: 0; border-radius: 0 0 20px 20px; }
#main_challenge .swiper-slide .card_content .chall_count {padding: 10px 0 20px; text-align: center; color: #9EA5AF; font-size: 13px;}
#main_challenge .swiper-slide .card_content .chall_ul {display: flex; flex-direction: column; flex-wrap: wrap; gap: 10px; }
#main_challenge .swiper-slide .card_content .chall_ul > li {display: flex; align-items: center; gap: 12px; padding: 9px 15px; border-radius: 20px; background: #FAFAFA; }
#main_challenge .swiper-slide .card_content .chall_ul > li .o_num {width: 25px; height: 25px; line-height: 25px; border-radius: 25px; background: #2D2F38; text-align: center; color: #FFF; font-size: 13px; font-weight: 500;}
#main_challenge .swiper-slide .card_content .chall_ul > li .song_info {flex: 1; }
#main_challenge .swiper-slide .card_content .chall_ul > li .song_info .comp {line-height: 1.2em; font-size: 14px; font-weight: 500; word-wrap: break-word; word-break: break-all; }
#main_challenge .swiper-slide .card_content .chall_ul > li .song_info .title {line-heighT: 1.2em; color: #747474; font-size: 13px; word-wrap: break-word; word-break: break-all; }
#main_challenge .swiper-pagination {position: static; margin-bottom: 20px; font-size: 0;}
#main_challenge .swiper-pagination .swiper-pagination-bullet {width: 5px; height: 5px; margin: 0 2px; border-radius: 3px; background: #C2C3C6; opacity: 1}
#main_challenge .swiper-pagination .swiper-pagination-bullet-active {width: 18px; background: #000; }

#main_challenge .challenge_wrap {position: relative; padding-bottom: 8px; }
#main_challenge .challenge_wrap:after {display: block; clear: both; content: ''; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); width: 100%; max-width: 960px; height: 8px; background: #F3F5F8;}
#main_challenge .monthly_challenge {position: relative; padding: 10px 0 8px; }
#main_challenge .challenge_video {padding-bottom: 40px; }
#main_challenge .challenge_video .chall_video_ul {display: flex; flex-direction: column; gap: 10px; }
#main_challenge .challenge_video .chall_video_ul > li {padding: 15px 20px; border: 1px solid #EAEAEA; border-radius: 10px; }

#main_challenge .challenge_video .chall_video_ul > li .item_top {margin-top: 10px; }
#main_challenge .challenge_video .chall_video_ul > li .item_top .title {flex: 1; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#main_challenge .challenge_video .chall_video_ul > li .cpl_wrap {display: flex; justify-content: space-between; align-items: center; }
#main_challenge .challenge_video .chall_video_ul > li .cpl_wrap .mb_info {display: flex; align-items: center; gap: 7px; }
#main_challenge .challenge_video .chall_video_ul > li .cpl_wrap .mb_info .img {position: relative; width: 24px; height: 24px; border-radius: 24px; overflow: hidden; }
#main_challenge .challenge_video .chall_video_ul > li .cpl_wrap .mb_info .img.no_img {background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA;}
#main_challenge .challenge_video .chall_video_ul > li .cpl_wrap .mb_info .img img {width: 100%; height: 100%; object-fit: cover; }
#main_challenge .challenge_video .chall_video_ul > li .cpl_wrap .mb_info .nick {font-size: 13px; }
#main_challenge .challenge_video .chall_video_ul > li .cpl_wrap .created_at {color: #747474; font-size: 13px; font-weight: 500;}

#main_challenge .challenge_video .chall_video_ul > li .info {display: flex; justify-content: space-between; align-items: center; margin-top: 15px; }
#main_challenge .challenge_video .chall_video_ul > li .info > div {display: flex; }
#main_challenge .challenge_video .chall_video_ul > li .info .left {gap: 20px; }
#main_challenge .challenge_video .chall_video_ul > li .info .left > div {display: flex; align-items: center; gap: 8px;}
#main_challenge .challenge_video .chall_video_ul > li .left img {width: auto; height: 13px; object-fit: contain;}
#main_challenge .challenge_video .chall_video_ul > li .left span {flex: 1; color: #747474; font-size: 13px; font-weight: 500;}
#main_challenge .challenge_video .chall_video_ul > li .view {align-items: center; gap: 8px;}
#main_challenge .challenge_video .chall_video_ul > li .view img {width: auto; height: 11px; object-fit: contain;}
#main_challenge .challenge_video .chall_video_ul > li .view span {flex: 1; color: #747474; font-size: 13px; font-weight: 500;}

#main_challenge .go_chall_list {padding-bottom: 20px; }
#main_challenge .chall_card_request {padding-bottom: 85px; }
#main_challenge .chall_button {width: 100%; max-width: 500px; margin: 0 auto; }
#main_challenge .chall_button button {width: 100%; line-height: 1em; padding: 20px; border: 1px solid #000; border-radius: 10px; text-align: center; font-size: 16px; font-weight: bold; }

/* .is_web #main_challenge .challenge_video .chall_video_ul {display: flex; gap: 40px; }
.is_web #main_challenge .challenge_video .chall_video_ul li {flex: 1; } */



/** main - challenge - list */
.chall_list_wrap {flex: 1; display: flex; flex-direction: column; padding-bottom: 35px; }
.chall_list_wrap .chall_list_result {flex: 1; margin-top: 30px; }
.chall_list_wrap .chall_list_result > ul {max-width: 1000px; margin: 0 auto; background: #F3F5F8; }
.chall_list_wrap .chall_list_result > ul > li {display: flex; margin-top: 8px; padding: 20px; background: #FFF;}
.chall_list_wrap .chall_list_result > ul > li:first-child {margin-top: 0; padding-top: 0; }
.chall_list_wrap .chall_list_result > ul > li > div {flex: 1; display: flex; flex-direction: column; width: 100%; height: 100%; }
.chall_list_wrap .chall_list_result .card_item .img_wrap {position: relative; border-radius: 20px; overflow: hidden;}
.chall_list_wrap .chall_list_result .card_item .img_wrap:before {position: relative; display: block; clear: both; content: ''; padding-bottom: calc(224 / 350 * 100%); background: rgba(0,0,0,0.2); z-index: 10;}
.chall_list_wrap .chall_list_result .card_item .img_wrap img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 5; }
.chall_list_wrap .chall_list_result .card_item .img_wrap .card_stat {position: absolute; top: 20px; left: 20px; width: 60px; line-height: 25px; border-radius: 13px; background: #C5211F; text-align: center; color: #FFF; font-size: 12px; font-weight: 500; letter-spacing: -0.04em; z-index: 20;}
.chall_list_wrap .chall_list_result .card_item .img_wrap .card_period {position: absolute; bottom: 20px; right: 20px; color: #FFF; font-size: 12px; z-index: 20;}
.chall_list_wrap .chall_list_result .card_item .card_content {flex: 1; margin-top: -20px; padding: 20px; border-radius: 0 0 20px 20px; border: 1px solid #E0E0E3; border-top: 0; }
.chall_list_wrap .chall_list_result .card_item .card_content .chall_count {padding: 10px 0; text-align: center; color: #9EA5AF; font-size: 13px;}
.chall_list_wrap .chall_list_result .card_item .card_content .song_list {display: flex; flex-direction: column; gap: 10px; }
.chall_list_wrap .chall_list_result .card_item .card_content .song_list li {display: flex;}
.chall_list_wrap .chall_list_result .card_item .card_content .song_list > li {display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 15px; margin-top: 10px; border-radius: 20px; background: #FAFAFA; }
.chall_list_wrap .chall_list_result .card_item .card_content .song_list > li .o_num {width: 25px; height: 25px; line-height: 25px; border-radius: 25px; background: #2D2F38; text-align: center; color: #FFF; font-size: 13px; font-weight: 500;}
.chall_list_wrap .chall_list_result .card_item .card_content .song_list > li .song_info {flex: 1; }
.chall_list_wrap .chall_list_result .card_item .card_content .song_list > li .song_info .comp {line-height: 1.2em; font-size: 14px; font-weight: 500; word-wrap: break-word; word-break: break-all; }
.chall_list_wrap .chall_list_result .card_item .card_content .song_list > li .song_info .title {line-heighT: 1.2em; color: #747474; font-size: 13px; word-wrap: break-word; word-break: break-all; }
.chall_list_wrap .chall_list_result .empty_li {display: flex; justify-content: center; align-items: center; text-align: center; padding: 40px 0; }




/** main - challenge - view */
.chall_card_view_wrap {width: 100%; max-width: 1000px; margin: 0 auto; background: #F3F5F8; flex: 1; overflow: auto; }
.chall_card_view_wrap .view_wrap {margin-bottom: 8px; padding: 0 20px; background: #FFF; }
.chall_card_view_wrap .view_wrap .card_img {position: relative; width: 100%; max-width: 600px; margin: 0 auto; border-radius: 20px; background: #D0D0D0; overflow: hidden; font-size: 0;}
.chall_card_view_wrap .view_wrap .card_img:after {display: block; clear: both; content: ''; position: relative; padding-bottom: calc((250 / 350) * 100%); background: rgba(0,0,0,0.5); z-index: 10;}
.chall_card_view_wrap .view_wrap .card_img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.chall_card_view_wrap .view_wrap .card_img .card_tag {position: absolute; top: 20px; left: 20px; padding: 6px 15px; border-radius: 13px; background: #F00;color: #FFF; font-size: 12px; z-index: 15;}
.chall_card_view_wrap .view_wrap .card_img .card_period {position: absolute; bottom: 20px; right: 20px; color: #FFF; font-size: 12px; z-index: 15;}
.chall_card_view_wrap .view_wrap .card_info {padding: 20px 0; }
.chall_card_view_wrap .view_wrap .card_info .chall_days {color: #747474; text-align: center; font-size: 15px; font-weight: 500;}
.chall_card_view_wrap .view_wrap .card_info .chall_title {margin-top: 10px; line-height: 1.3em; text-align: center; font-size: 21px; font-weight: bold;}
.chall_card_view_wrap .view_wrap .card_info .chall_count {margin-top: 6px; color: #9EA5AF; text-align: center; font-size: 13px; }
.chall_card_view_wrap .song_list {display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; padding: 20px; background: #FFF; }
.chall_card_view_wrap .song_list li {display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 20px; border: 1px solid #EAEAEA; border-radius: 20px; }
.chall_card_view_wrap .song_list li .left {flex: 1; }
.chall_card_view_wrap .song_list li .composer {font-size: 14px; font-weight: 500; letter-spacing: -0.04em; word-wrap: break-word; word-break: break-all; }
.chall_card_view_wrap .song_list li .title {line-height: 1.3em; color: #747474; font-size: 13px; letter-spacing: -0.04em; word-wrap: break-word; word-break: break-all; }
.chall_card_view_wrap .song_list li .right {display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.chall_card_view_wrap .song_list li .right button {display: flex; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 32px; border-radius: 10px; font-size: 0; }
.chall_card_view_wrap .song_list li .right button span {font-size: 14px; font-weight: bold; }
.chall_card_view_wrap .song_list li .right button.score_button {background: #F6F7F8; }
.chall_card_view_wrap .song_list li .right button.score_button img {width: 14px; height: auto; }
.chall_card_view_wrap .song_list li .right button.score_button span {color: #757575; }
.chall_card_view_wrap .song_list li .right button.media_button {background: #5F5F5F; }
.chall_card_view_wrap .song_list li .right button.media_button img {width: 11px; height: auto; }
.chall_card_view_wrap .song_list li .right button.media_button span {color: #FFF; }

.chall_card_view_wrap .success_card_wrap {padding: 20px; background: #FFF;}
.chall_card_view_wrap .success_card_wrap > div {font-size: 16px; }
.chall_card_view_wrap .success_card_wrap ul {display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.chall_card_view_wrap .success_card_wrap ul li {padding: 15px 20px; border: 1px solid #EAEAEA; border-radius: 10px; }
.chall_card_view_wrap .success_card_wrap ul li .member_info {display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.chall_card_view_wrap .success_card_wrap ul li .member_info .left {display: flex; align-items: center; gap: 10px; }
.chall_card_view_wrap .success_card_wrap ul li .member_info .left .mb_img {
	position: relative; 
	width: 22px; border-radius: 100%; background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA; 
	overflow: hidden;
}
.chall_card_view_wrap .success_card_wrap ul li .member_info .left .mb_img:after {display: block; clear: both; content: ''; padding-bottom: 100%; }
.chall_card_view_wrap .success_card_wrap ul li .member_info .left .mb_img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.chall_card_view_wrap .success_card_wrap ul li .member_info .left .mb_nick {font-size: 13px; font-weight: bold; }
.chall_card_view_wrap .success_card_wrap ul li .member_info .right {color: #747474; font-size: 13px; font-weight: 500;}
.chall_card_view_wrap .success_card_wrap ul li .card_info {display: flex; justify-content: space-between; align-items: center; margin-top: 15px; }
.chall_card_view_wrap .success_card_wrap ul li .card_info .left {display: flex; align-items: center; gap: 10px; }
.chall_card_view_wrap .success_card_wrap ul li .card_info .left > div {display: flex; justify-content: flex-start; gap: 9px; font-size: 0;}
.chall_card_view_wrap .success_card_wrap ul li .card_info .left > div span {color: #747474; font-size: 13px; }
.chall_card_view_wrap .success_card_wrap ul li .card_info .left > div img {width: auto; height: 13px; object-fit: contain; }
.chall_card_view_wrap .success_card_wrap ul li .card_info .left .like {}
.chall_card_view_wrap .success_card_wrap ul li .card_info .right > div {display: flex; align-items: center; gap: 9px; }
.chall_card_view_wrap .success_card_wrap ul li .card_info .right > div img {width: auto; height: 11px; object-fit: contain; }
.chall_card_view_wrap .success_card_wrap ul li .card_info .right > div span {color: #747474; font-size: 13px; }
.chall_card_view_wrap .success_card_wrap ul li.empty_li {display: flex; justify-content: center; align-items: center; width: 100%; padding: 80px 0; border: 0; text-align: center; }

.chall_card_view_wrap .button_area {position: relative; padding: 20px 0 40px; background: #FFF;}
.chall_card_view_wrap .button_area:after {display: block; clear: both; content: ''; height: 56px; }
.chall_card_view_wrap .button_area button {
	display: block; 
	position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 100;
	width: calc(100% - 40px); max-width: 500px; height: 56px; border-radius: 10px; background: #C5211F; 
	color: #FFF; font-size: 16px; font-weight: bold; 
}

#chall_view_confirm .confirm_details {}
#chall_view_confirm .confirm_details p {margin-top: 10px; color: #F56E6E; font-size: 16px; }
#chall_view_confirm .confirm_details .chall_period {margin-top: 5px; color: #747474; font-size: 13px; }

.is_web .chall_card_view_wrap { margin-top: 30px; }
.is_web .chall_card_view_wrap .button_area:after {display: none;}
.is_web .chall_card_view_wrap .button_area button {position: relative; bottom: 0; }





/** main - challenge - request */
.chall_card_request_wrap {width: 100%; max-width: 1000px; margin: 0 auto; background: #EFF3F5; }
.chall_card_request_wrap .box_wrap {padding: 20px; margin-top: 5px; background: #FFF; }
.chall_card_request_wrap .box_wrap:first-of-type {margin-top: 0; }
.chall_card_request_wrap .box_wrap > h4 {display: flex; justify-content: flex-start; align-items: center; gap: 10px; }
.chall_card_request_wrap .box_wrap > h4 > span {font-size: 17px; font-weight: bold; }
.chall_card_request_wrap .box_wrap > h4 div {display: flex; justify-content: flex-start; align-items: flex-start; gap: 5px;}
.chall_card_request_wrap .box_wrap > h4 div img {width: 14px; object-fit: contain; }
.chall_card_request_wrap .box_wrap > h4 div span {color: #ED0000; font-size: 13px; font-weight: normal;}
.chall_card_request_wrap .box_wrap .song_list {}
.chall_card_request_wrap .box_wrap .song_list li {}
.chall_card_request_wrap .box_wrap .song_list li h5 {position: relative; padding: 20px 0; border-bottom: 1px solid #000; }
.chall_card_request_wrap .box_wrap .song_list li h5 .title {}
.chall_card_request_wrap .box_wrap .song_list li h5 button {position: absolute; top: 50%; right: 0; transform: translate(0, -50%); width: 20px; height: 20px; border-radius: 20px; }
.chall_card_request_wrap .box_wrap .song_list li h5 button span {display: none;}
.chall_card_request_wrap .box_wrap .song_list li h5 .song_add_button {background: url('/include/images/song_add_icon.png') no-repeat center/ 20px, #5F5F5F;}
.chall_card_request_wrap .box_wrap .song_list li h5 .song_sub_button {background: url('/include/images/song_sub_icon.png') no-repeat center/ 20px, #BEBEBE;}
.chall_card_request_wrap .box_wrap .song_list li .song_info {display: flex; flex-direction: column; gap: 10px; padding: 15px 0; }

.chall_card_request_wrap .button_area {position: relative; padding: 20px 0 40px; background: #FFF;}
.chall_card_request_wrap .button_area:after {display: block; clear: both; content: ''; height: 56px; }
.chall_card_request_wrap .button_area button {
	display: block; 
	position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); 
	width: calc(100% - 40px); height: 56px; border-radius: 10px; background: #C5211F; 
	color: #FFF; font-size: 16px; font-weight: bold; 
}



/** main - community */
#main_community {background: #F7F7F7; padding-bottom: 80px; }
.main_commu_top {padding: 20px 0; background: #000; }
.main_commu_top > .inner {display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.main_commu_top h2 {display: none; color: #FFF; font-size: 24px; font-weight: 600;}

.sch_wrap {display: flex; flex-wrap: wrap; width: 100%; padding: 0 15px; border-radius: 10px; background: #F6F7F8;}
.sch_wrap .stx_wrap {flex: 1; }
.sch_wrap input {display: block; width: 100%; height: 42px; padding: 0 5px; border: none; background: none; font-size: 16px; font-weight: 500; outline: none;}
.sch_wrap button {padding: 5px; font-size: 0; }
.sch_wrap button img {width: 19px; height: 19px; object-fit: cover;}

#commu_search {width: 100%;}
.order_post {display: flex; justify-content: space-between; align-items: center; margin-top: 15px;}
.order_post .post_cat {display: flex; align-items: center; gap: 5px; }

.only_own {}
.only_own label {position: relative; display: block;}
.only_own label input[type="checkbox"] {position: absolute; width: 1px; height: 1px; margin: -1px; visibility: hidden; outline: none;}
.only_own .chkbox_button {display: flex; justify-content: center; align-items: center; padding: 7px 15px; border: 1px solid #EBEBEB; border-radius: 20px; }
.only_own .chkbox_button span {color: #747474; font-size: 13px; font-weight: 500; }
.only_own label input[type="checkbox"]:checked ~ .chkbox_button {border: 1px solid #C5211F; background: #C5211F; }
.only_own label input[type="checkbox"]:checked ~ .chkbox_button span {color: #FFF; font-weight: bold;}

.post_list_ul {width: 100%; max-width: 1000px; margin: 0 auto; }
.post_list_ul .post_item {margin-top: 8px; padding: 20px; background: #FFF; }
.post_list_ul .post_item:nth-child(1) {margin-top: 0; }
.post_list_ul .post_item.empty_li {width: 100%; padding: 80px 0; background: none; text-align: center; }

.post_con {display: flex; align-items: center; gap: 10px; }
.post_con .post_text {flex: 1; }
.post_con .post_text .text_auth {display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.post_con .post_text .text_auth .author_img {position: relative; min-width: 26px; border-radius: 100%; overflow: hidden;}
.post_con .post_text .text_auth .author_img.no_img {background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA;}
.post_con .post_text .text_auth .author_img:before {display: block; clear: both; content: ''; padding-bottom: 100%; border-radius: 100%; }
.post_con .post_text .text_auth .author_img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.post_con .post_text .text_auth .author_nick {font-size: 14px; font-weight: 600; }
.post_con .post_text .title {line-height: 1.3em; margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.post_con .post_text .content {height: 3em; line-height: 1.5em; color: #3D3D3D; font-size: 14px; -webkit-line-clamp: 2; }

.post_con .post_img {position: relative; width: 100px; height: 100px; border-radius: 6px; overflow: hidden; font-size: 0;}
.post_con .post_img img {width: 100%; height: 100%; object-fit: cover;}

.post_info {display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 11px;}
.post_info .left {display: flex; justify-content: flex-end; align-items: center; gap: 15px; }
.post_info dl {display: flex; align-items: center; gap: 6px;}
.post_info dt {font-size: 0; }
.post_info dt img {width: auto; height: 12px; object-fit: cover; }
.post_info dd {color: #888; font-size: 12px;}
.post_info .like {cursor: pointer; }

.post_info .right .created_at {color: #888; font-size: 12px; font-weight: 500;}

#main_community .more_button {}
#main_community .float_button {position: fixed; top: 85%; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1200px; height: 0; z-index: 150;}
#main_community .float_button .top_button {display: none; position: absolute; bottom: 0; left: 20px; width: 46px; height: 46px; border-radius: 46px; background: #D9D9D9; text-align: center; z-index: 151;}
#main_community .float_button .top_button i {line-height: 46px; color: #000; font-size: 16px; font-weight: bold; }
#main_community .float_button .post_write {
	position: absolute; bottom: 0; right: 20px; z-index: 151;
	width: 46px; height: 46px; border-radius: 46px; background: url('/include/images/post_write_icon.png') no-repeat center/cover, #C5211F;
	font-size: 0;
}



/** main - community - view */
.commu_view_wrap {width: 100%; max-width: 1000px; margin: 0 auto; padding-top: 20px; }
/* .commu_view_wrap .inner {max-width: 500px;} */
.commu_view_wrap .view_top {display: flex; align-items: center; }
.commu_view_wrap .view_top .profile {display: flex; align-items: center; gap: 8px; }
.commu_view_wrap .view_top .mb_img {position: relative; width: 34px; height: 34px; border-radius: 34px; background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA; overflow: hidden;}
.commu_view_wrap .view_top .mb_img img {width: 100%; height: 100%; object-fit: cover; }
.commu_view_wrap .view_top .mb_nick {font-size: 16px; font-weight: bold;}
.commu_view_wrap .view_details {margin-top: 20px; }
.commu_view_wrap .view_details .view_stat {display: flex;}
.commu_view_wrap .view_details .view_stat span {padding: 3px 6px; margin-bottom: 15px; border-radius: 5px; background: rgba(197,33,31,0.17); color: #C5211F; font-size: 13px; font-weight: 600;}
.commu_view_wrap .view_details .view_subject {line-height: normal; font-size: 16px; font-weight: bold; word-wrap: break-word; word-break: break-all; }
.commu_view_wrap .view_details .view_content {line-height: normal; margin-top: 10px; font-size: 14px; }
.commu_view_wrap .view_details .view_content img {display: block; width: 100%; max-width: 500px; }
.commu_view_wrap .view_details .view_images {display: flex; flex-direction: column; align-items: start; gap: 20px; margin: 20px 0; }
.commu_view_wrap .view_details .view_images > div {border-radius: 10px; font-size: 0; overflow: hidden;}
.commu_view_wrap .view_details .created_at {display: block; margin-top: 17px; color: #747474; font-size: 13px; font-weight: 500;}

.commu_view_wrap .view_info {display: flex; justify-content: space-between; align-items: center; padding-top: 20px; padding-bottom: 20px; border-bottom: 0px solid #E9EAF0; }
.commu_view_wrap .view_info > div {display: flex; align-items: center; gap: 10px; }

.commu_view_wrap .view_info .left {display: flex; justify-content: flex-end; gap: 10px; }
.commu_view_wrap .view_info .left > div {display: flex; align-items: center; gap: 6px;}
.commu_view_wrap .view_info .left img {object-fit: contain;}
.commu_view_wrap .view_info .left .like img {width: 13px; }
.commu_view_wrap .view_info .left .reply img {width: 12px; }
.commu_view_wrap .view_info .left .view_count img {width: 14px; }
.commu_view_wrap .view_info .left span {color: #888; font-size: 12px; }

.commu_view_wrap .view_info > div div {display: flex; gap: 10px; align-items: center; cursor: pointer; }
.commu_view_wrap .view_info > div div img {width: auto; height: 13px; object-fit: contain; }
.commu_view_wrap .view_info > .view_count {gap: 5px; }
.commu_view_wrap .view_info > .view_count img {width: auto; height: 11px; object-fit: contain; }
.commu_view_wrap .view_info span {color: #747474; font-size: 13px;}
.commu_view_wrap .reply_list {border-top: 1px solid #E9EAF0;}




/** main - community - write */
.commu_write_wrap {flex: 1; display: flex; flex-direction: column; max-width: 500px; }
.commu_write_wrap .write_form_wrap {flex: 1; }
.commu_write_wrap .button_area {padding-bottom: 40px; }
.commu_write_wrap .button_area button {display: block; width: 100%; height: 56px; border-radius: 10px; background: #C5211F; color: #FFF; font-size: 16px; font-weight: bold;}




/** profile */
.profile_content {position: relative; width: 100%; background: #FFF; height: 100%; }
.profile_content .profile_info {}

.profile_content .profile_info .profile_img.no_img {background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA;}
.profile_content .profile_info .infos {flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 0 16px; }
.profile_content .profile_info .infos dl {display: flex; gap: 6px; }
.profile_content .profile_info .follow_area {display: flex; align-items: center; gap: 10px; }
.profile_content .profile_info .follow_area button {
	display: flex; justify-content: center; align-items: center; gap: 5px; 
	min-width: 64px; height: 30px; padding: 0 10px; border-radius: 16px; border: 1px solid #FFF; font-size: 12px; font-weight: 500;
}
.profile_content .profile_info .follow_area button.red_button {border-color: #C5211F; color: #C5211F; }
.profile_content .profile_info .follow_area button.gray_button {border-color: #EDEDED; color: #888; }
.profile_content .profile_info .sns_ul {display: flex; align-items: center; gap: 12px; }
.profile_content .profile_info .sns_ul li {display: flex; justify-content: center; align-items: center; width: 40px; height: 30px; border-radius: 20px; background: #F1F2F4; }
.profile_content .profile_info .sns_ul .insta i {display: block; width: 18px; height: 18px; background: url('/include/images/insta_icon.png') no-repeat center/contain; }
.profile_content .profile_info .sns_ul .ytb i {display: block; width: 21px; height: 14px; background: url('/include/images/ytb_icon2.png') no-repeat center/contain; }

.profile_content .profile_info .info_mob .info_top {display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 20px; }
.profile_content .profile_info .info_mob .info_top .profile_img {width: 70px; height: 70px; border-radius: 70px; overflow: hidden; }
.profile_content .profile_info .info_mob .info_top .profile_img.no_img {background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA;}
.profile_content .profile_info .info_mob .info_top .profile_img img {width: 100%; height: 100%; object-fit: cover; }
.profile_content .profile_info .info_mob .info_top .infos {flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 0 16px; }
.profile_content .profile_info .info_mob .info_top .infos span {width: 1px; height: 14px; background: #EDEDED; }
.profile_content .profile_info .info_mob .info_top .infos dl {flex-direction: column;}
.profile_content .profile_info .info_mob .info_top .infos dt {width: 100%; text-align: center; font-size: 11px; font-weight: 500; }
.profile_content .profile_info .info_mob .info_top .infos dd {width: 100%; text-align: center; font-size: 16px; font-weight: 600; }
.profile_content .profile_info .info_mob .info_bot {display: flex; justify-content: space-between; align-items: center; padding-top: 20px; }

.profile_content .profile_info .info_pc {display: none; padding: 40px 0; border-bottom: 1px solid #F5F5F5; }
.profile_content .profile_info .info_pc > div {display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.profile_content .profile_info .info_pc .left {display: flex; align-items: center; gap: 40px; }
.profile_content .profile_info .info_pc .profile_img {width: 100px; height: 100px; border-radius: 100px; overflow: hidden; }
.profile_content .profile_info .info_pc .desc {display: flex; align-items: center; gap: 28px; }
.profile_content .profile_info .info_pc .nick {font-size: 18px; font-weight: bold; }
.profile_content .profile_info .info_pc .infos {padding-top: 20px; gap: 30px; }
.profile_content .profile_info .info_pc .infos dt {font-size: 14px; }
.profile_content .profile_info .info_pc .infos dd {font-size: 14px; font-weight: bold;}

.profile_content .post_area {width: 100%; max-width: 1000px; margin: 0 auto; }
.profile_content .post_area > div {display: flex; flex-direction: column; background: #FFF; }
.profile_content .post_area > div > ul {order: 1; }

.profile_content .post_area .profile_note {width: 100%; padding-top: 20px; padding-bottom: 30px; }
.profile_content .post_area .note_ul li {padding: 20px; border-bottom: 1px solid #EDEDED; }
.profile_content .post_area .note_ul li .item_top {display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.profile_content .post_area .note_ul li .item_top .category {line-height: 20px; padding: 0 7px; border-radius: 5px; color: #FFF; font-size: 12px; font-weight: 600;}
.profile_content .post_area .note_ul li .item_top .cate_plan {background: #FFC000; }
.profile_content .post_area .note_ul li .item_top .cate_prac {background: #66BD2B; }
.profile_content .post_area .note_ul li .item_top .cate_lesson {background: #7E42E0; }
.profile_content .post_area .note_ul li .item_top .cate_feedback {background: #2E75B6; }
.profile_content .post_area .note_ul li .item_top .subj_wrap {flex: 1; }
.profile_content .post_area .note_ul li .item_top .subject {line-height: normal; font-size: 16px; font-weight: 600; -webkit-line-clamp: 1; }
.profile_content .post_area .note_ul li .item_top .created_at {margin-top: 2px; color: #C4C4C4; font-size: 11px; }
.profile_content .post_area .note_ul li .item_top .icon_group {display: flex; align-items: center; gap: 12px;}
.profile_content .post_area .note_ul li .item_top .icon_group img {width: auto; height: 12px; object-fit: cover; }

.profile_content .post_area .note_ul li .item_mid {height: 2.4em; line-height: 1.2em; margin: 10px 0; color: #3D3D3D; font-size: 14px; }
.profile_content .post_area .note_ul li .item_bot {display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.profile_content .post_area .note_ul li .item_bot > div {display: flex; align-items: center; gap: 15px; }
.profile_content .post_area .note_ul li .item_bot dl {display: flex; align-items: center; gap: 6px;}
.profile_content .post_area .note_ul li .item_bot dt {font-size: 0; }
.profile_content .post_area .note_ul li .item_bot dt img {width: auto; height: 12px; object-fit: cover; }
.profile_content .post_area .note_ul li .item_bot dd {color: #888; font-size: 12px;}
.profile_content .post_area .note_ul li .item_bot .like {cursor: pointer; }
.profile_content .post_area .note_ul li .item_bot .allow {color: #888; font-size: 11px; font-weight: 500;}
.profile_content .post_area .note_ul li .item_bot .allow.teacher {color: #2E75B6; }
.profile_content .post_area .note_ul li.empty_li {width: 100%; padding: 40px 0; justify-content: center; align-items: center; border: 0; text-align: center; font-size: 15px; font-weight: 500; }

.profile_content .post_area hr {display: block; margin: 0; padding-bottom: 8px; border: 0; background: #F5F5F5; }

.profile_content .post_area .profile_comp_prac {width: 100%; padding-top: 30px; padding-bottom: 30px; }
.profile_content .post_area .comp_prac_ul {display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 0 20px; }
.profile_content .post_area .comp_prac_ul > li {width: calc((100% - 10px) / 2); }
.profile_content .post_area .comp_prac_ul > li:nth-child(n+3) {display: none; }
.profile_content .post_area .comp_prac_ul > li .img_wrap {position: relative; background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA; overflow: hidden; }
.profile_content .post_area .comp_prac_ul > li .img_wrap:before {display: block; clear: both; content: ''; padding-bottom: 100%;}
.profile_content .post_area .comp_prac_ul > li .img_wrap img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.profile_content .post_area .comp_prac_ul > li .like_stat {display: flex; align-items: center; padding-top: 10px; display: none; }
.profile_content .post_area .comp_prac_ul > li .like_stat dl {display: flex; align-items: center; gap: 6px; color: #888; }
.profile_content .post_area .comp_prac_ul > li .like_stat dt {font-size: 0; }
.profile_content .post_area .comp_prac_ul > li .like_stat dt img {width: auto; height: 12px; object-fit: cover; }
.profile_content .post_area .comp_prac_ul > li .like_stat dd {font-size: 12px; }
.profile_content .post_area .comp_prac_ul > li.empty_li {width: 100%; padding: 40px 0; justify-content: center; align-items: center; border: 0; text-align: center; font-size: 15px; font-weight: 500; }



.profile_content .post_area .title_wrap {order: 2; display: flex; justify-content: space-between; align-items: center; }
.profile_content .post_area .title_wrap h2 {display: none; font-size: 16px; }
.profile_content .post_area .title_wrap .more_button {width: 100%; margin-top: 20px; padding: 0 20px; }



/** profile note list */







/** shop */
.shop_list_wrap {flex: 1; display: flex; flex-direction: column; background: #F3F5F8; width: 100%; max-width: 1000px; margin: 0 auto;}
.rest_shop {display: none; padding: 20px; margin-bottom: 10px; background: #FFF; }
.rest_shop > div {display: flex; justify-content: space-between; align-items: center; }
.rest_shop .info_block {margin-bottom: 15px; }
.rest_shop .info_block .rest_info {display: flex; align-items: center; gap: 5px; }
.rest_shop .info_block .rest_img {display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 24px; background: #000;}
.rest_shop .info_block .rest_img svg {max-width: 18px; fill: #FFF; }
.rest_shop .info_block .rest_info b {font-size: 14px; font-weight: bold; }
.rest_shop .info_block .rest_info span {font-size: 13px;}
.rest_shop .info_block .rest_text {display: flex; align-items: center; padding: 8px; border-radius: 8px; background: #747474; color: #FFF; font-size: 11px; font-weight: 500;}
.rest_shop .buy_block {}
.rest_shop .buy_block b {font-size: 27px;}
.rest_shop .buy_block button {display: flex; align-items: center; padding: 9px 16px; border: 1px solid #C5211F; border-radius: 7px; text-align: center; color: #C5211F; font-size: 14px; font-weight: 600;}

.gift_shop {display: none; flex: 1; padding: 20px; background: #FFF; }
.gift_shop ul > li {display: flex; margin-top: 30px; gap: 20px; }
.gift_shop ul > li:first-child {margin-top: 0; }
.gift_shop ul > li.empty_li {display: flex; justify-content: center; align-items: center; padding: 80px 0;}
.gift_shop ul > li .gift_img {position: relative; width: 95px; height: 95px; border-radius: 10px; overflow: hidden; background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA; font-size: 0; }
.gift_shop ul > li .gift_img:after {display: block; clear: both; content: ''; padding-bottom: 100%; }
.gift_shop ul > li .gift_img img {width: 100%; height: 100%; object-fit: cover;}
.gift_shop ul > li .gift_info {flex: 1;}
.gift_shop ul > li .gift_info .gift_name {font-size: 14px; }
.gift_shop ul > li .gift_info .gift_price {display: flex; align-items: baseline; gap: 5px; margin: 10px 0 20px; }
.gift_shop ul > li .gift_info .gift_price strong {font-size: 14px; }
.gift_shop ul > li .gift_info .gift_price span {font-size: 12px; }
.gift_shop ul > li .gift_info .gift_button button {padding: 8px 16px; border-radius: 7px; background: #C5211F; color: #FFF; font-size: 13px; }

.preparing {flex: 1; display: flex; justify-content: center; align-items: center; background: #FFF; }
.preparing > div {padding-bottom: 60px;}
.preparing p {padding: 0 20px; line-height: 1.2em; text-align: center; color: #555; font-size: 15px; font-weight: 500; vertical-align: middle; letter-spacing: -0.04em; }
.preparing .icon {line-height: 1em; margin-bottom: 20px; font-size: 40px;}



/** follow */
.follow_wrap {}
.follow_tab > ul {display: flex;}
.follow_tab > ul > li {position: relative; flex: 1; padding: 15px 0; text-align: center; color: #747474; font-size: 15px; font-weight: 600;}
.follow_tab > ul > li:after {display: block; clear: both; content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #EDEDED; }
.follow_tab > ul > li.on {color: #000;}
.follow_tab > ul > li.on:after {height: 2px; background: #000;}
.follow_list {}
.follow_list > div {display: none; }
.follow_list > div.on {display: block;}
.follow_list .list_wrap .list_total {display: flex; padding: 20px 20px 0; }
.follow_list .list_wrap .tot_desc {display: flex; align-items: center; gap: 5px; padding: 10px 15px; border-radius: 50px; border: 1px solid #F4F4F4; background: #FAFAFA; font-size: 14px; }
.follow_list .list_wrap .tot_desc b {font-weight: 600;}
.follow_list .list_wrap ul {display: flex; flex-direction: column; align-items: center; flex-wrap: wrap; gap: 20px; padding-top: 30px; padding-bottom: 30px; }
.follow_list .list_wrap ul li {display: flex; justify-content: space-between; align-items: center; gap: 5px; width: 100%; }
.follow_list .list_wrap ul li:first-child {margin-top: 0; }
.follow_list .list_wrap ul li.empty_li {display: flex; justify-content: center; align-items: center; padding: 80px 0; }
.follow_list .list_wrap ul li .left {display: flex; align-items: center; gap: 12px; }
.follow_list .list_wrap ul li .left .mb_img {position: relative; width: 34px; height: 34px; border-radius: 34px; overflow: hidden; background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA;}
.follow_list .list_wrap ul li .left .mb_img img {width: 100%; height: 100%; object-fit: cover;}
.follow_list .list_wrap ul li .left .mb_nick {font-size: 14px; word-break: break-all; }
.follow_list .list_wrap ul li .right > div {display: flex; align-items: center; gap: 10px; }
.follow_list .list_wrap ul li .right button {
	display: flex; justify-content: center; align-items: center; gap: 5px; 
	min-width: 64px; height: 30px; padding: 0 10px; border-radius: 16px; border: 1px solid #FFF; font-size: 12px; font-weight: 500;
}
.follow_list .list_wrap ul li .right button.red_button {border-color: #C5211F; color: #C5211F; }
.follow_list .list_wrap ul li .right button.red_button img {max-width: 9px; height: auto; }
.follow_list .list_wrap ul li .right button.border_button {border: 1px solid #C5211F; background: #FFF; color: #C5211F; }
.follow_list .list_wrap ul li .right button.border_button img {max-width: 9px; height: auto; }
.follow_list .list_wrap ul li .right button.gray_button {border-color: #EDEDED; color: #888; }
.follow_list .list_wrap ul li .right button.follow_modal_button {width: auto; padding: 5px; }
.follow_list .list_wrap ul li .right button.follow_modal_button img {max-width: 13px; }
.follow_list .list_wrap ul li .right .request_follow span {font-size: 13px; font-weight: 600;}



/** follow - challenge */
.follow_chlist_wrap {}
.follow_chlist {}
.follow_chlist li {margin-top: 10px; padding: 20px; border: 1px solid #EAEAEA; border-radius: 10px;}
.follow_chlist li:first-child {margin-top: 0;}
.follow_chlist li.empty_li {display: flex; justify-content: center; align-items: center; padding: 80px 0; border: 0; }

.follow_chlist .card_top {display: flex; justify-content: space-between; align-items: center; }
.follow_chlist .card_top .created_at {color: #747474; font-size: 13px; font-weight: 500;}
.follow_chlist .author_info {display: flex; align-items: center; gap: 7px;}
.follow_chlist .author_info .author_img {position: relative; min-width: 24px; border-radius: 100%; overflow: hidden;}
.follow_chlist .author_info .author_img.no_img {background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA;}
.follow_chlist .author_info .author_img:after {display: block; clear: both; content: ''; padding-bottom: 100%; border-radius: 100%; }
.follow_chlist .author_info .author_img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.follow_chlist .author_info .author_nick {font-size: 13px;}
.follow_chlist .card_title {margin-top: 10px; font-size: 15px; font-weight: 600; white-space: nowrap; word-break: keep-all; text-overflow: ellipsis; overflow: hidden;}
.follow_chlist .card_bottom {display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 11px;}
.follow_chlist .card_bottom .post_info {display: flex; justify-content: flex-end; gap: 10px; }
.follow_chlist .card_bottom .post_info > div {display: flex; }
.follow_chlist .card_bottom .post_info img {width: 15px; height: auto; object-fit: contain;}
.follow_chlist .card_bottom .post_info span {flex: 1; margin-left: 10px; color: #747474; font-size: 13px; font-weight: 500;}
.follow_chlist .card_bottom .view {display: flex;}
.follow_chlist .card_bottom .view img {width: 16px; height: auto; object-fit: contain;}
.follow_chlist .card_bottom .view span {flex: 1; margin-left: 10px; color: #747474; font-size: 13px; font-weight: 500;}


.follow_chview_wrap {flex: 1; }
.follow_chview_wrap .view_top {}
.follow_chview_wrap .info_wrap {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.follow_chview_wrap .info_wrap .member_info {display: flex; align-items: center; gap: 8px; }
.follow_chview_wrap .info_wrap .member_info .mb_img {position: relative; width: 32px; height: 32px; border-radius: 32px; background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA; overflow: hidden;}
.follow_chview_wrap .info_wrap .member_info .mb_img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.follow_chview_wrap .info_wrap .member_info .mb_nick {font-size: 15px; font-weight: bold;}
.follow_chview_wrap .info_wrap .created_at {font-size: 13px; font-weight: 600;}
.follow_chview_wrap .view_top .card_title {padding-bottom: 10px; border-bottom: 1px solid #BEBEBE; font-size: 17px; font-weight: bold;}
.follow_chview_wrap .song_list {max-width: 1000px; margin: 0 auto; background: #F3F5F8;}
.follow_chview_wrap .song_list > li {margin-top: 10px; padding: 20px 20px 30px; background: #FFF; }
.follow_chview_wrap .song_list > li:first-child {margin-top: 0; padding-top: 10px; }
.follow_chview_wrap .song_list > li:last-child {padding-bottom: 20px; }
.follow_chview_wrap .song_list > li .composer {font-size: 16px; font-weight: 600;}
.follow_chview_wrap .song_list > li .song_title {padding-top: 15px; font-size: 13px; font-weight: 500;}
.follow_chview_wrap .song_list > li .media_cont > div {padding: 20px 0; border-top: 1px solid #E9EAF0}
.follow_chview_wrap .song_list > li .media_cont > div:first-child {border: 0; }
.follow_chview_wrap .song_list > li .media_cont .wrap {position: relative; border-radius: 10px; max-width: 500px; overflow: hidden;}
.follow_chview_wrap .song_list > li .media_cont .wrap:after {display: block; clear: both; content: ''; padding-bottom: calc((180 / 350) * 100%)}
.follow_chview_wrap .song_list > li .media_cont .wrap iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.follow_chview_wrap .song_list > li .cont_text {padding-top: 10px; font-size: 13px; font-weight: 500;}

.follow_chview_wrap .view_info {display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid #E9EAF0; }
.follow_chview_wrap .view_info > div {display: flex; align-items: center; gap: 10px; }
.follow_chview_wrap .view_info > div div {display: flex; align-items: center; gap: 10px; }
.follow_chview_wrap .view_info > div div img {width: auto; height: 13px; object-fit: contain; }
.follow_chview_wrap .view_info > .view_count {gap: 5px; }
.follow_chview_wrap .view_info > .view_count img {width: auto; height: 11px; object-fit: contain; }
.follow_chview_wrap .view_info span {color: #747474; font-size: 13px;}

.follow_chview_wrap .reply_list {}



/** reply common */
.reply_list {padding-bottom: 20px; }
.reply_list > li {display: flex; align-items: flex-start; gap: 10px; padding: 20px; }
.reply_list > li:last-child {border: 0; }
.reply_list > li .reply_img {width: 28px; height: 28px; border-radius: 28px; background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA; font-size: 0; overflow: hidden;}
.reply_list > li .reply_img img {width: 100%; height: 100%; object-fit: cover;}
.reply_list > li .reply_text {flex: 1; }
.reply_list > li .reply_text .text_top {position: relative; display: flex; justify-content: space-between; align-items: center; }
.reply_list > li .reply_text .text_top .profile {display: flex; align-items: center; gap: 10px; }
.reply_list > li .reply_text .text_top .profile .mb_img {width: 28px; height: 28px; border-radius: 28px; background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA; font-size: 0; overflow: hidden;}
.reply_list > li .reply_text .text_top .profile .mb_img img {width: 100%; height: 100%; object-fit: cover;}
.reply_list > li .reply_text .text_top .mb_nick {line-height: 28px; font-size: 14px; font-weight: bold; }
.reply_list > li .reply_text .text_mid {margin-left: 28px; padding-left: 10px; }
.reply_list > li .reply_text .reply_content {line-height: 1.5em; margin: 5px 0; font-size: 14px; word-break: break-all;}
.reply_list > li .reply_text textarea.reply_content {display: block; width: 100%; height: 44px; padding: 0; border: 0; background: #F7F7F7; resize: none; outline: none;}
.reply_list > li .reply_text textarea.reply_content:read-only {background: #FFF; }
.reply_list > li .reply_text .button_wrap {display: none; align-items: center; justify-content: flex-start; gap: 5px; margin-bottom: 10px; }
.reply_list > li .reply_text .button_wrap.on {display: flex; }
.reply_list > li .reply_text .button_wrap button {display: block; padding: 5px 8px; border-radius: 5px; font-size: 12px; font-weight: 500;}
.reply_list > li .reply_text .button_wrap .edit_button {background: #C5211F; color: #FFF; }
.reply_list > li .reply_text .button_wrap .cancel_button {color: #FFF; }
.reply_list > li .reply_text .created_at {color: #747474; font-size: 12px;}
.reply_list .reply_menu_button {display: none; position: absolute; top: 50%; right: -10px; transform: translateY(-50%); padding: 10px; font-size: 0;}
.reply_list .reply_menu_button img {width: 13px; height: 13px; object-fit: contain; }
.reply_list .reply_menu_button.on {display: block;}
.reply_list > li.empty_container {justify-content: center; align-items: center; padding: 40px 0; text-align: center; }

.reply_option {display: none; align-items: center; gap: 10px; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.reply_option.on {display: flex;}
.reply_option button {display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 14px; background: #FAFAFA; }
.reply_option button img {object-fit: contain;}
.reply_option button.reply_edit img {width: 11px; height: 11px; }
.reply_option button.reply_del img {width: 11px; height: 11px; }
.reply_option button span {color: #757575; font-size: 13px; }

.reply_write {
	display: flex; align-items: center; gap: 10px; 
	/* position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);  */
	padding-top: 10px; padding-bottom: 20px; border-top: 1px solid #E9EAF0; background: #FFF; 
}
.reply_write .reply_like_button {padding: 10px; margin-left: -10px; font-size: 0;}
.reply_write .reply_like_button img {width: 20px; height: 18px; object-fit: contain;}
.reply_write .reply_input {flex: 1; position: relative; }
.reply_write .reply_input input {height: 50px; padding-right: 50px; padding-left: 20px; border-radius: 50px; border: 0; background: #F6F7F8;  }
.reply_write .reply_input textarea {display: block; width: 100%; height: 44px; line-height: 42px; padding: 0 20px; padding-right: 44px; border-radius: 28px; border: 1px solid #F5F7FA; background: #F5F7FA; font-size: 15px; outline: none; -webkit-outline: none;}
.reply_write .reply_input button {position: absolute; top: 0; right: 0; padding: 10px; }
.reply_write .reply_input button img {width: 30px; height: 30px; object-fit: contain; }
.is_app .reply_write {padding-bottom: 40px; }
.is_web .reply_write {padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #E9EAF0; margin-bottom: 80px; }



/** follow - modal */
.follow_modal {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100;}
.follow_modal .modal_back {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2);}
.follow_modal .modal_box_wrap {position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);}
.link_list {margin-bottom: 10px; border-radius: 15px; background: #FFF; }
.link_list li {display: flex; justify-content: center; align-items: center; height: 58px; border-top: 1px solid #F0F0F5; text-align: center; font-size: 17px; }
.link_list li:first-child {border-top: 0; }
.close_button {width: 100%; height: 58px; border-radius: 15px; background: #FFF; font-size: 17px; font-weight: 500;}



/** metronome */
.metronome_wrap {max-width: 500px; /* min-height: 100%; */ padding-top: 30px; padding-bottom: 30px; }
.metronome_wrap .tickBoxWrap {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; min-height: 170px; padding: 20px; border-radius: 10px; background: #F1F2F4; }
.metronome_wrap .tick_box_wrap {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px 40px; }
.metronome_wrap .tick_box_wrap > div {display: flex; justify-content: center; align-items: center; }
.metronome_wrap .tick_box_wrap span {display: flex; justify-content: center; align-items: center; position: relative; /* width: 56px; height: 56px; */ border-radius: 56px; transition: 0.01s linear all;}
.metronome_wrap .tick_box_wrap span:before {
	display: block; clear: both; content: ''; 
	position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 56px; background: rgba(77, 83, 99, 0); z-index: 1;
	transition: 0.01s linear all;
}
.metronome_wrap .tick_box_wrap span:after {
	display: block; clear: both; content: ''; 
	position: relative; z-index: 2;
	width: 36px; height: 36px; border-radius: 36px; background: rgba(77, 83, 99, 0.5); 
	transition: 0.01s linear all;
}

.metronome_wrap .tick_box_wrap > div:nth-child(1) span:after {background: url('/include/images/marcato_icon_w.png') no-repeat center / 16px 20px, rgba(77, 83, 99, 0.5); }

.metronome_wrap .tick_box_wrap.eighth {width: 100%; gap: 20px; }
.metronome_wrap .tick_box_wrap.eighth > div:nth-child(3n) span:after,
.metronome_wrap .tick_box_wrap.eighth > div:nth-child(3n-1) span:after {width: 28px; height: 28px; border-radius: 28px; }
.metronome_wrap .tick_box_wrap > div.on span:before {background-color: rgba(77, 83, 99, 0.2);}
.metronome_wrap .tick_box_wrap > div.on span:after {background-color: rgba(77, 83, 99, 1);}
.metronome_wrap .tick_box_wrap.eighth > div {width: calc((100% - 100px) / 3);}
/* .metronome_wrap .tick_box_wrap.eighth:not(.beats9, .beats12) > div {width: calc((100% - 100px) / 3);} */

.metronome_wrap .bpm_wrap {margin: 40px 0; padding: 0 15px; color: #3D3D3D; }
.metronome_wrap .bpm_wrap .bpm_controller {display: flex; justify-content: center; align-items: center; }
.metronome_wrap .bpm_wrap button {display: block; width: 54px; height: 54px; border-radius: 54px; border: 0px solid #000; font-size: 0;}
.metronome_wrap .bpm_wrap button:disabled {border-color: #A2A2A2; color: #A2A2A2; opacity: 0.4; }
.metronome_wrap .bpm_wrap .bpm_minus {background: url('/include/images/bpm_minus.png') no-repeat center/contain;}
.metronome_wrap .bpm_wrap .bpm_plus {background: url('/include/images/bpm_plus.png') no-repeat center/contain;}

.metronome_wrap .bpm_wrap .bpm_box {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 120px; }
.metronome_wrap .bpm_wrap .bpm_box span {font-size: 55px;}
.metronome_wrap .bpm_wrap b {display: block; text-align: center; font-size: 14px; font-weight: 500;}

.metronome_wrap .tempo_wrap {margin-bottom: 65px; }
.metronome_wrap .tempo_wrap .select_ul {max-height: 200px; overflow: auto; }

.metronome_wrap .slide_bar_wrap {margin-bottom: 50px; font-size: 0; }
.metronome_wrap .slide_bar_wrap #bpm_slide {width: 100%; height: 5px; border-radius: 5px; margin: 0; background: #E8E8E8; outline: none; -webkit-appearance: none; appearance: none; accent-color: #C5211F; }
.metronome_wrap .slide_bar_wrap #bpm_slide::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; background: #C5211F; cursor: pointer; height: 25px; width: 25px; border-radius: 25px;}
.metronome_wrap .slide_bar_wrap #bpm_slide::-moz-range-thumb {background: #C5211F; cursor: pointer; height: 25px; width: 25px; border-radius: 25px;}
.metronome_wrap .slide_bar_wrap #bpm_slide::-webkit-slider-runnable-track {color: #C5211F; cursor: pointer;}

.metronome_wrap .controls_wrap {display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
.metronome_wrap .controls_wrap button {display: block; width: 65px; height: 65px; border-radius: 65px; font-size: 0; }
.metronome_wrap .controls_wrap button:not(.play_button) {background: #5F5F5F;}
.metronome_wrap .controls_wrap button.play_button.play {background: url('/include/images/metronome_play.png') no-repeat left 22px center / 24px auto, #C5211F;}
.metronome_wrap .controls_wrap button.play_button.stop {background: url('/include/images/metronome_stop.png') no-repeat center / 23px auto, #C5211F;}
.metronome_wrap .controls_wrap .time_select span {color: #FFF; font-size: 17px; font-weight: 600;}
.metronome_wrap .controls_wrap button.note_select {}
.metronome_wrap .controls_wrap button[data-notes='4'][data-parts='4'] {background: url('/include/images/notes/notes_quarter_w.png') no-repeat center/ auto 20px, #5F5F5F;}
.metronome_wrap .controls_wrap button[data-notes='4'][data-parts='8'] {background: url('/include/images/notes/notes_eighth_w.png') no-repeat center/ auto 20px, #5F5F5F;}
.metronome_wrap .controls_wrap button[data-notes='4'][data-parts='12'] {background: url('/include/images/notes/notes_triplet_w.png') no-repeat top 12px center/ auto 30px, #5F5F5F;}
.metronome_wrap .controls_wrap button[data-notes='4'][data-parts='12'][data-disabledIdx] {background: url('/include/images/notes/notes_triplet_2_w.png') no-repeat top 12px center/ auto 30px, #5F5F5F;}
.metronome_wrap .controls_wrap button[data-notes='4'][data-parts='16'] {background: url('/include/images/notes/notes_sixteenth_w.png') no-repeat center/ auto 20px, #5F5F5F;}
.metronome_wrap .controls_wrap button[data-notes='4'][data-parts='16'][data-disabledIdx] {background: url('/include/images/notes/notes_sixteenth_2_w.png') no-repeat center/ auto 20px, #5F5F5F;}
.metronome_wrap .controls_wrap button[data-notes='8'][data-multiple="3"]{background: url('/include/images/notes/notes_dotted_quarter_w.png') no-repeat center/ auto 20px, #5F5F5F;}
.metronome_wrap .controls_wrap button[data-notes='8']{background: url('/include/images/notes/notes_eighth3_w.png') no-repeat center/ auto 20px, #5F5F5F;}
.metronome_wrap .controls_wrap button[data-notes='8'][data-disabledIdx]{background: url('/include/images/notes/notes_eighth3_2_w.png') no-repeat center/ auto 20px, #5F5F5F;}



/** metronome - modal */
.select_modal {display: none; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 200;}
.select_modal .modal_back {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: -1; }
.select_modal .modal_box_wrap {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; max-width: 580px; border-radius: 15px; background: #FFF; }
.select_modal .modal_box_wrap .modal_header {position: relative; padding-top: 30px; }
.select_modal .modal_box_wrap .modal_header .modal_close {display: block; width: 15px; height: 15px; background: url('/include/images/page_close.png') no-repeat center/contain;}
.select_modal .modal_box_wrap .select_button_area {display: flex; flex-direction: column; padding: 15px 0; }
.select_modal .modal_box_wrap .select_button_area button {display: block; width: 100%; padding: 15px 0; font-size: 0;}
.select_modal .modal_box_wrap .select_button_area button span {font-size: 16px; font-weight: bold;}
.select_modal .modal_box_wrap .button_area {display: none; padding-bottom: 30px; }
.select_modal .modal_box_wrap .button_area button {display: block; width: 100%; height: 56px; border-radius: 10px; background: #BEBEBE; color: #FFF; font-size: 16px; }

#time_sign_modal {align-items: flex-end; }
#time_sign_modal .modal_box_wrap {position: static; transform: translate(0, 0); width: 100%; border-radius: 15px 15px 0 0; }
#time_sign_modal .select_button_area {/* flex-direction: row; */}
#time_sign_modal .select_button_area > div {flex: 1; }

#notes_modal {align-items: flex-end; }
#notes_modal .modal_box_wrap {position: static; transform: translate(0, 0); width: 100%; border-radius: 15px 15px 0 0; }
#notes_modal .select_button_area {display: none; /* flex-direction: row; */ flex-wrap: wrap; }
#notes_modal .select_button_area button {display: block; /* width: 50%; */ height: 50px;}
#notes_modal .select_button_area.quarter button {}
#notes_modal .select_button_area.quarter button[data-parts="4"] {background: url('/include/images/notes/notes_quarter_b.png') no-repeat center/ auto 20px;}
#notes_modal .select_button_area.quarter button[data-parts="8"] {background: url('/include/images/notes/notes_eighth_b.png') no-repeat center/ auto 20px;}
#notes_modal .select_button_area.quarter button[data-parts="12"] {height: 60px; background: url('/include/images/notes/notes_triplet_b_2.png') no-repeat center/ auto 30px;}
#notes_modal .select_button_area.quarter button[data-parts="12"][data-disabledIdx] {background: url('/include/images/notes/notes_triplet_2_b_2.png') no-repeat center/ auto 30px;}
#notes_modal .select_button_area.quarter button[data-parts="16"] {background: url('/include/images/notes/notes_sixteenth_b.png') no-repeat center/ auto 20px;}
#notes_modal .select_button_area.quarter button[data-parts="16"][data-disabledIdx] {background: url('/include/images/notes/notes_sixteenth_2_b.png') no-repeat center/ auto 20px;}

#notes_modal .select_button_area.eighth button {/* width: calc(100% / 3); height: 60px; */}
#notes_modal .select_button_area.eighth button[data-parts="8"][data-multiple="3"]{background: url('/include/images/notes/notes_dotted_quarter_b.png') no-repeat center/ auto 20px;}
#notes_modal .select_button_area.eighth button[data-parts="8"]{background: url('/include/images/notes/notes_eighth3_b_2.png') no-repeat center/ auto 20px;}
#notes_modal .select_button_area.eighth button[data-parts="8"][data-disabledIdx]{background: url('/include/images/notes/notes_eighth3_2_b_2.png') no-repeat center/ auto 20px;}



/** member_edit */
.member_edit_wrap {width: 100%; max-width: 500px; margin: 0 auto; background: #EFF3F5;}
.edit_area {padding-top: 20px; padding-bottom: 30px; background: #FFF; margin-bottom: 5px;}
.edit_area .input_form > .input_wrap {margin-bottom: 30px; }
.edit_area .button_area {margin-top: 60px; }
.edit_area .button_area button {margin: 0; color: #FFF; font-size: 16px; font-weight: bold; }

.ph_hour_content {}
.ph_hour_content .ph_hour_wrap {width: 30px; }
.ph_hour_content .input_group {flex-wrap: wrap; gap: 0;}
.ph_hour_content .ph_month_title {font-size: 16px; font-weight: 500;}
.ph_hour_content .ph_time_wrap {display: flex; align-items: center; gap: 5px; }
.ph_hour_content .ph_hour_default {width: 100%; text-align: right; }


.leave_area {padding-top: 10px; padding-bottom: 40px; background: #FFF; }
.leave_area .leave_button {display: flex; position: relative; width: 100%; padding: 10px 0; font-size: 0;}
.leave_area .leave_button:after {display: block; clear: both; content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 8px; height: 14px; background: url('/include/images/member_menu_arrow.png') no-repeat center/contain;}
.leave_area .leave_button span {font-size: 14px; font-weight: 500; }



/** member_edit - change password */
.change_pw_wrap {}
.change_pw_wrap .precaution {margin-bottom: 30px; padding: 15px; border-radius: 5px; background: #F8F9FA; }
.change_pw_wrap .precaution h4 {font-size: 15px; font-weight: bold; }
.change_pw_wrap .precaution ul {margin-top: 10px; }
.change_pw_wrap .precaution ul li {color: #747474; font-size: 14px; }

.change_pw_wrap .pw_form_wrap {}
.change_pw_wrap .pw_form_wrap > .input_form:nth-of-type(1) .input_wrap {margin-bottom: 30px}
.change_pw_wrap .pw_form_wrap > .input_form:nth-of-type(2) .input_wrap {margin-bottom: 10px}
.change_pw_wrap .pw_form_wrap .button_area {margin-top: 50px; }
.change_pw_wrap .pw_form_wrap .button_area button {display: block; width: 100%; height: 56px; border-radius: 10px; background: #C5211F; color: #FFF; font-size: 16px; font-weight: bold; }



/** member_leave */
.member_leave_wrap {max-width: 500px; }
.member_leave_wrap .leave_top {padding-bottom: 25px;}
.member_leave_wrap .leave_top h4 {line-height: 1.5em; font-size: 22px; font-weight: 500;}
.member_leave_wrap .leave_top p {line-height: 1.5em; color: #747474; font-size: 15px;}
.member_leave_wrap .check_list {padding: 20px; border-radius: 5px; background: #F6F7FB; }
.member_leave_wrap .check_list > ul li {display: flex; gap: 12px; margin-top: 15px; }
.member_leave_wrap .check_list > ul li:first-child {margin-top: 0; }
.member_leave_wrap .check_list > ul li:before {display: block; clear: both; content: ''; width: 4px; height: 4px; margin: 7px 0; border: 1px solid #707070; border-radius: 4px; background: #776393; }
.member_leave_wrap .check_list > ul li div {flex: 1; line-height: 1.5em; font-size: 14px; }
.member_leave_wrap .leave_submit_button {display: block; width: 100%; height: 56px; margin-top: 40px; border-radius: 10px; text-align: center; background: #C5211F; color: #FFF; font-size: 16px; font-weight: bold;}



/** membership */
.membership_store_wrap {}
.membership_store_wrap .store_top {margin-bottom: 40px; text-align: center; font-size: 0;}
.membership_store_wrap .store_top span {display: inline-block; margin-top: 15px; font-size: 21px; font-weight: 500;}
.membership_store_wrap .logo_img {width: 160px; margin: 0 auto; font-size: 0; }

.membership_cate {display: flex; justify-content: center; gap: 10px; }
.membership_cate li {position: relative; width: calc((100% - 20px) / 3); max-width: 120px; border: 1px solid #DBE0E7; border-radius: 15px; text-align: center; }
.membership_cate li:before {display: block; clear: both; content: ''; padding-bottom: 100%; }
.membership_cate li > div {display: flex; flex-direction: column; align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; }
.membership_cate li .cate {width: 60px; line-height: 24px; border-radius: 15px; background: #C5211F; color: #FFF; font-size: 13px; font-weight: bold; }
.membership_cate li .price {padding-top: 10px; color: #AAA9B7; font-size: 15px; font-weight: bold; }
.membership_cate li .origin_price {color: #AAA9B7; font-size: 13px; font-weight: 500; text-decoration: line-through;}
.membership_cate li.on {border: 2px solid #C5211F; }
.membership_cate li.on > div {margin-top: -1px;}
.membership_cate li.on .price {color: #000;}
.membership_cate li.months .cate {background: #000; }
.membership_cate li.months .origin_price {text-decoration: none;}

.membership_benefit {max-width: 500px; margin-top: 80px; }
.membership_benefit h4 {margin-bottom: 40px; font-size: 20px; font-weight: bold;}
.membership_benefit table {width: 100%;}
.membership_benefit table thead th {font-size: 18px; }
.membership_benefit table thead th.pro {color: #C5211F; }
.membership_benefit table tbody th {padding: 15px 0; text-align: left; font-size: 15px; font-weight: 400; }
.membership_benefit table tbody td {padding: 15px 0; text-align: center; font-size: 15px; }

.membership_precaution {margin-top: 35px; background: #F7F7F7; }
.membership_precaution h4 {padding-top: 20px; margin-bottom: 15px; font-size: 15px; font-weight: bold;}
.membership_precaution ul li {display: flex; align-items: start; margin-bottom: 10px; color: #9E9E9E; font-size: 13px; font-weight: 400;}
.membership_precaution ul li:before {display: block; clear: both; content: '※'; }
.membership_precaution .button_area {position: relative; max-width: 500px; margin: 0 auto; padding: 20px 0 50px; }
.membership_precaution .button_area:before {display: block; clear: both; content: ''; padding-bottom: 56px;}
.membership_precaution .button_area button {
	display: block;
	position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%); z-index: 100;
	width: calc(100% - 40px); max-width: 500px; height: 56px; border-radius: 10px; background: #C5211F; color: #FFF; font-size: 16px; font-weight: bold; 
}



/** membership - modal */
#months_payment .months_list {margin-top: 20px; }
#months_payment .months_list button {width: 100%; padding: 10px 0; text-align: left; font-size: 16px; font-weight: 500;}



/** purchase_list */
.purchase_list_wrap .list_container {width: 100%; max-width: 1000px; margin: 0 auto; }
.pur_tab {}
.pur_tab > ul {display: flex;}
.pur_tab > ul > li {position: relative; flex: 1; padding: 15px 0; text-align: center; color: #747474; font-size: 15px; font-weight: 600;}
.pur_tab > ul > li:after {display: block; clear: both; content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #F9F9F9; }
.pur_tab > ul > li.on {color: #000;}
.pur_tab > ul > li.on:after {height: 2px; background: #000;}

.pur_list {display: none; }
.pur_list.on {display: block;}
.pur_list > ul > li.empty_li {display: flex; justify-content: center; align-items: center; width: 100% !important; padding: 80px 0 !important; border: 0 !important; }
.pur_list .list_period {margin: 25px 0 20px; }

#pur_membership > ul > li {margin-top: 20px; padding: 20px; border: 1px solid #EAEAEA; border-radius: 15px; }
#pur_membership > ul > li:first-child {margin-top: 0; }
#pur_membership > ul > li .billing_at {color: #747474; font-size: 13px; font-weight: 500;}
#pur_membership > ul > li .membership_title {padding: 10px 0; font-size: 15px; font-weight: bold; }
#pur_membership > ul > li .use_period {color: #747474; font-size: 13px; font-weight: 500;}

#pur_coupon > ul > li {display: flex; gap: 20px; margin-top: 30px; }
#pur_coupon > ul > li:first-child {margin-top: 0; }
#pur_coupon > ul > li .cp_img {position: relative; width: 90px; border-radius: 10px; background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA;}
#pur_coupon > ul > li .cp_img:after {display: block; clear: both; content: ''; padding-bottom: 100%;}
#pur_coupon > ul > li .cp_img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
#pur_coupon > ul > li .cp_text {flex: 1; position: relative; }
#pur_coupon > ul > li .cp_text .billing_at {color: #747474; font-size: 14px; }
#pur_coupon > ul > li .cp_text .stat {padding-top: 10px; font-size: 14px; font-weight: bold;}
#pur_coupon > ul > li .cp_text button {position: absolute; bottom: 0; left: 0; padding: 8px 16px; border-radius: 7px; background: #FAFAFA; font-size: 13px; }



/** point */
.point_list_wrap {padding-top: 20px; }
.point_list_wrap .point_top {}
.point_list_wrap .point_board {display: flex; justify-content: space-between; align-items: center; padding: 15px; border: 1px solid #DDD; border-radius: 15px; background: #FAFAFA; }
.point_list_wrap .point_board .left h5 {font-size: 14px; font-weight: 500;}
.point_list_wrap .point_board .left p {padding-top: 8px; font-size: 17px; font-weight: bold; }
.point_list_wrap .point_board .right {display: flex; align-items: center; gap: 10px; height: 24px; padding: 0 12px; border-radius: 24px;  background: #000; }
.point_list_wrap .point_board .right > div {display: flex; align-items: center; gap: 7px; }
.point_list_wrap .point_board .right > div span {color: #FFF; font-size: 13px; font-weight: bold;}
.point_list_wrap .point_board .right > div .rest_img svg {fill: #FFF}
.point_list_wrap .point_board .right .whole_group .rest_img {width: 100%; max-width: 18px; font-size: 0;}
.point_list_wrap .point_board .right .eighth_group .rest_img {width: 100%; max-width: 8px; font-size: 0;}

.point_list_wrap .point_wrap .point_tab {padding: 0 0 20px; }
.point_list_wrap .point_wrap .point_tab > ul {display: flex; align-items: center; margin-top: -7px;}
.point_list_wrap .point_wrap .point_tab > ul > li {flex: 1;}
.point_list_wrap .point_wrap .point_tab > ul > li span {display: block; position: relative; color: #BBB; padding: 15px 0; text-align: center; font-size: 15px; }
.point_list_wrap .point_wrap .point_tab > ul > li span:after {display: block; clear: both; content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #EDEDED;}
.point_list_wrap .point_wrap .point_tab > ul > li.on span {color: #000; font-weight: 600;}
.point_list_wrap .point_wrap .point_tab > ul > li.on span:after {height: 2px; background: #000;}

.point_list_wrap .point_wrap .point_list .list_period {margin: 20px 0; }
.point_list_wrap .point_wrap .point_list > div {display: none;}
.point_list_wrap .point_wrap .point_list > div.on {display: block;}
.point_list_wrap .point_wrap .point_list > div > ul > li {display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; margin-bottom: 30px; border-radius: 15px; }
.point_list_wrap .point_wrap .point_list > div > ul > li:first-child {margin-top: 0; }
.point_list_wrap .point_wrap .point_list > div > ul > li.empty_li {display: flex; justify-content: center; align-items: center; padding: 80px 0; border: 0; }
.point_list_wrap .point_wrap .point_list > div > ul > li .content_wrap {}
.point_list_wrap .point_wrap .point_list > div > ul > li .subject {font-size: 16px; font-weight: bold; }
.point_list_wrap .point_wrap .point_list > div > ul > li .detail {margin-top: 6px; color: #888; font-size: 14px; font-weight: 500;}
.point_list_wrap .point_wrap .point_list > div > ul > li .created_at {color: #B4B4B4; font-size: 13px; font-weight: 500;}



/** inquiry */
.inquiry_button {margin-bottom: 40px; }
.inquiry_button button {display: block; width: 100%; max-width: 350px; height: 52px; margin: 0 auto; border-radius: 6px; background: #C5211F; text-align: center; color: #FFF; font-size: 16px; font-weight: 500; }

.inquiry_list_wrap {flex: 1; display: flex; flex-direction: column; }
.inquiry_list_wrap .list_ul {flex: 1; width: 100%; max-width: 960px; margin: 0 auto; overflow-y: auto; }
.inquiry_list_wrap .list_ul > li {padding: 20px; border-bottom: 1px solid #EDEDED; }
.inquiry_list_wrap .list_ul > li .subject {font-size: 16px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.inquiry_list_wrap .list_ul > li .infos {display: flex; align-items: baseline; gap: 10px;  margin-top: 12px; }
.inquiry_list_wrap .list_ul > li .infos span {font-size: 15px; font-weight: 500;}
.inquiry_list_wrap .list_ul > li .infos span.stat_wait {color: #BDBDBD; }
.inquiry_list_wrap .list_ul > li .infos span.stat_done {color: #EF4646; }
.inquiry_list_wrap .list_ul > li .infos p {color: #747474; font-size: 14px; }
.inquiry_list_wrap .list_ul > .empty_li {border-bottom: 0; text-align: center; }
.inquiry_list_wrap .list_ul:after {display: block; clear: both; content: ''; padding-bottom: 20px; }

.is_web .inquiry_list_wrap .list_ul {margin-top: 10px; }


.inquiry_write_wrap {margin-top: 20px; }
.inquiry_write_wrap .write_form_wrap {flex: 1; display: flex; flex-direction: column; }
.inquiry_write_wrap .write_form_wrap .form_group {flex: 1; width: 100%; }
.inquiry_write_wrap .input_wrap {margin-bottom: 20px; }

.inquiry_view_wrap {width: 100%; max-width: 1000px; margin: 0 auto;}
.inquiry_view_wrap .inq_item {padding: 20px; }
.inquiry_view_wrap .inq_item .inq_top {display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #EDEDED; font-size: 13px; }
.inquiry_view_wrap .inq_item .inq_top h4 {width: 100%; line-height: 1.2em; font-size: 15px; }
.inquiry_view_wrap .inq_item .inq_top span {font-weight: bold; }
.inquiry_view_wrap .inq_item .inq_top span.stat_wait {color: #BDBDBD; }
.inquiry_view_wrap .inq_item .inq_top span.stat_done {color: #EF4646; }
.inquiry_view_wrap .inq_item .inq_top .created_at {color: #888; }
.inquiry_view_wrap .inq_item .inq_content {line-height: 1.5em; color: #3D3D3D; font-size: 14px; }

.inquiry_view_wrap .inq_reply {padding-top: 8px; background: #F7F7F7; }
.inquiry_view_wrap .inq_reply .admin_reply {padding: 20px; background: #FFF; }
.inquiry_view_wrap .inq_reply .admin_reply .reply_header {display: flex; flex-direction: column; gap: 5px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #EDEDED; }
.inquiry_view_wrap .inq_reply .admin_reply .reply_header h4 {font-size: 15px; }
.inquiry_view_wrap .inq_reply .admin_reply .reply_header .replied_at {display: block; color: #888; font-size: 13px;}
.inquiry_view_wrap .inq_reply .admin_reply .reply_content {color: #3D3D3D; font-size: 14px; }


.inquiry_view_wrap .inq_reply .empty_inq_reply {padding: 10px 0; text-align: center; color: #888; font-size: 13px;}




/** notice */
.notice_list_wrap {width: 100%; max-width: 1000px; margin: 0 auto; margin-bottom: 140px; }
.notice_list_wrap .list_ul {}
.notice_list_wrap .list_ul > li {padding: 20px; border-bottom: 1px solid #EDEDED; }
.notice_list_wrap .list_ul > li .subject {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.notice_list_wrap .list_ul > li .subject * {line-height: 1.3em;}
.notice_list_wrap .list_ul > li .subject .stat {font-size: 16px; font-weight: bold;}
.notice_list_wrap .list_ul > li .subject .subject_text {font-size: 16px; font-weight: 500;}
.notice_list_wrap .list_ul > li .created_at {margin-top: 6px; color: #747474; font-size: 14px; }
.notice_list_wrap .list_ul > li.empty_li {display: flex; justify-content: center; align-items: center; padding: 80px 0; border-bottom: 0; }

.notice_view_wrap {}
.notice_view_wrap .view_info {display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 20px 0; margin-bottom: 20px; border-bottom: 1px solid #EDEDED; }
.notice_view_wrap .view_info b {width: 100%; line-height: 1.2em; font-size: 15px; font-weight: bold;}
.notice_view_wrap .view_info .created_at {color: #888; font-size: 13px;}
.notice_view_wrap .view_content {line-height: 1.3em; font-size: 14px;}



/** lesson common */
.lesson_sch {margin: 0 0 30px; padding-top: 10px; }

.sch_bar {display: flex; align-items: center; height: 42px; padding: 0 5px; border-radius: 10px; background: #F6F7F8;}
.sch_bar .sch_input {flex: 1; }
.sch_bar .sch_input input {width: 100%; padding: 0 10px; background: none; border: 0; font-size: 16px; outline: none;}
.sch_bar .sch_submit {padding: 10px; line-height: 1em; }
.sch_bar .sch_submit img {width: 16px; height: 16px; object-fit: cover; }

.list_group {}
.list_head {display: flex; align-items: center; background: #F6F7F8; height: 40px; }
.list_head li {padding: 10px 5px; text-align: center; font-size: 12px; font-weight: 600;}
.list_body > li {display: flex; align-items: center; min-height: 42px; border-bottom: 1px solid #EDEDED; }
.list_body > li > div {padding: 10px 5px; text-align: center; font-size: 13px; font-weight: 500; word-break: break-word; }
.list_body > li.empty_li {padding: 30px 0; border-bottom: 0; font-weight: 700;}
.list_body > li .del {padding: 3px 6px; border-radius: 4px; background: #1E1E1E; color: #FFF; font-size: 12px; font-weight: 500;}


/** lesson teacher list */
.teacher_list_wrap {}
.teacher_list_wrap .add_teacher_wrap {display: flex; justify-content: flex-end; align-items: center; margin-bottom: 20px; } 
.teacher_list_wrap .add_teacher {display: flex; justify-content: center; align-items: center; gap: 5px; width: 100px; height: 32px; border: 1px solid #EBEBEB; border-radius: 40px; }
.teacher_list_wrap .add_teacher img {width: 10px; height: 10px; object-fit: contain; }
.teacher_list_wrap .add_teacher span {color: #5F5F5F; font-size: 13px; font-weight: 500; }

.teacher_list_wrap .list_head li {flex: 2;}
.teacher_list_wrap .list_head li:nth-child(1){flex: 1; }
.teacher_list_wrap .list_body > li > div {flex: 2; }
.teacher_list_wrap .list_body > li > div:nth-child(1) {flex: 1; }




/** lesson student list */
.student_list_wrap {}
.student_list_wrap .list_head li:nth-child(1) {flex: 1; }
.student_list_wrap .list_head li:nth-child(2) {flex: 4; }
.student_list_wrap .list_head li:nth-child(3) {flex: 3; }
.student_list_wrap .list_head li:nth-child(4) {flex: 3; }
/* .student_list_wrap .list_head li:nth-child(5) {flex: 3; } */
.student_list_wrap .list_body > li > div {display: flex; flex-direction: column; gap: 5px; }
.student_list_wrap .list_body > li > div:nth-child(1) {flex: 1; }
.student_list_wrap .list_body > li > div:nth-child(2) {flex: 4; }
.student_list_wrap .list_body > li > div:nth-child(3) {flex: 3; }
.student_list_wrap .list_body > li > div:nth-child(4) {flex: 3; }
/* .student_list_wrap .list_body > li > div:nth-child(5) {flex: 3; } */
.student_list_wrap .list_body > li > div a {cursor: default;}
.student_list_wrap .list_body > li .deleted_at {color: #EF4646; }
.student_list_wrap .list_body > li .del {width: 100%; max-width: 70px; margin: 0 auto; padding: 4px;}

#student_sch .filter_wrap {position: relative; display: flex; justify-content: space-between; align-items: center; margin-top: 15px;}

.chk_label {position: relative; display: flex; align-items: center; gap: 5px;}
.chk_label input {position: absolute; width: 1px; height: 1px; margin: -1px; border: none; visibility: hidden; outline: none; }
.chk_label div {display: flex; justify-content: center; align-items: center; width: 18px; height: 18px; border: 1px solid #B6B9C2; border-radius: 4px; }
.chk_label input:checked + div {border-color: #4D5363; background: #4D5363; }
.chk_label input:checked + div:after {display: block; clear: both; content: '\2713'; color: #FFF; line-height: 1em; }
.chk_label span {font-size: 15px; }

.go_feedback {position: absolute; right: 0; padding: 4px 6px; border-radius: 4px; background: #2E75B6; color: #FFF; text-align: center; font-size: 12px; font-weight: 500;}
.write_feedback {width: 100%; max-width: 70px; margin: 0 auto; padding: 4px; border: 1px solid #2E75B6; border-radius: 4px; color: #2E75B6; font-size: 12px; font-weight: 500;}



/** lesson feedback list */
.feedback_list_wrap {}
.feedback_list_wrap .feedback_list {}
.feedback_list_wrap .feedback_list .list_ul {width: 100%; max-width: 1000px; margin: 0 auto; padding: 0; }
.feedback_list_wrap .feedback_list .list_ul li {padding: 20px; border-bottom: 1px solid #EDEDED;}
.feedback_list_wrap .feedback_list .list_ul li .wrap {}
.feedback_list_wrap .feedback_list .list_ul li .head {display: flex; justify-content: space-between; align-items: center;}
.feedback_list_wrap .feedback_list .list_ul li .title {display: flex; justify-content: flex-start; align-items: center; gap: 8px;}
.feedback_list_wrap .feedback_list .list_ul li .item_cat {padding: 3px 7px; border-radius: 5px; font-size: 12px; font-weight: 500;}
.feedback_list_wrap .feedback_list .list_ul li .item_cat.feedback {background: #2E75B6; color: #FFF; }
.feedback_list_wrap .feedback_list .list_ul li p {color: #1E1E1E; font-size: 16px; font-weight: 700;}
.feedback_list_wrap .feedback_list .list_ul li .icon_group {display: flex; align-items: center; gap: 12px;}
.feedback_list_wrap .feedback_list .list_ul li .icon_group img {width: auto; height: 12px; object-fit: cover; }
.feedback_list_wrap .feedback_list .list_ul li .body {
	height: 2.6em; line-height: 1.3em; margin: 10px 0; color: #3D3D3D; font-size: 14px; 
	display: -webkit-box;
    -webkit-line-clamp: 2; /* 라인수 */
    -webkit-box-orient: vertical;
	white-space: normal; text-overflow: ellipsis; overflow: hidden;
}
.feedback_list_wrap .feedback_list .list_ul li .foot {display: flex; justify-content: space-between; align-items: center; }
.feedback_list_wrap .feedback_list .list_ul li .foot .left {display: flex; align-items: center; gap: 15px;}
.feedback_list_wrap .feedback_list .list_ul li .foot dl {display: flex; align-items: center; gap: 6px;}
.feedback_list_wrap .feedback_list .list_ul li .foot dt {font-size: 0; }
.feedback_list_wrap .feedback_list .list_ul li .foot dt img {width: auto; height: 12px; object-fit: cover; }
.feedback_list_wrap .feedback_list .list_ul li .foot dd {color: #888; font-size: 12px;}
.feedback_list_wrap .feedback_list .list_ul li .foot .right {color: #2E75B6; font-size: 11px; font-weight: 500;}

.feedback_list_wrap .feedback_list .list_ul li.empty_li {display: flex; justify-content: center; align-items: center; width: 100%; padding: 40px 20px; border: 0; text-align: center; font-size: 15px; font-weight: 500;}



/** lesson feedback view */
.header_option {position: absolute; right: -10px; height: 34px; padding: 10px; font-size: 0; }
.header_option img {width: 14px; height: auto; object-fit: cover; }

.feedback_view_wrap {width: 100%; max-width: 1000px; margin: 0 auto; }
.feedback_created_at {text-align: center; color: #BDBDBD; font-size: 15px; z-index: 100; }
.feedback_view_wrap .view_wrap {border-bottom: 1px solid #EDEDED; }
.feedback_view_wrap .view_wrap .cat_wrap {display: flex; align-items: center; margin-bottom: 20px; }
.feedback_view_wrap .view_wrap .cat_wrap span {padding: 3px 7px; border-radius: 5px; font-size: 12px; font-weight: 600;}
.feedback_view_wrap .view_wrap .cat_wrap .feedback {background: #2E75B6; color: #FFF; }
.feedback_view_wrap .view_wrap .view_media > div {margin-bottom: 20px; }
.feedback_view_wrap .view_wrap .view_media .ytb_box {position: relative; width: 100%; max-width: 500px; font-size: 0; overflow: hidden;}
.feedback_view_wrap .view_wrap .view_media .ytb_box:before {display: block; clear: both; content: ''; padding-bottom: calc((9/16) * 100%)}
.feedback_view_wrap .view_wrap .view_media .ytb_box .wrap {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.feedback_view_wrap .view_wrap .view_media .ytb_box iframe {width: 100%; height: 100%; }
.feedback_view_wrap .view_wrap .view_cont {margin-bottom: 20px;}
.feedback_view_wrap .view_wrap .view_info {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.feedback_view_wrap .view_wrap .view_info .left {display: flex; align-items: center; gap: 10px; }
.feedback_view_wrap .view_wrap .view_info .left > div {display: flex; align-items: center; gap: 6px; }
.feedback_view_wrap .view_wrap .view_info .left > div img {object-fit: contain; }
.feedback_view_wrap .view_wrap .view_info .left > div span {color: #888; font-size: 12px; }
.feedback_view_wrap .view_wrap .view_info .like img {width: 13px; }
.feedback_view_wrap .view_wrap .view_info .reply img {width: 12px; }
.feedback_view_wrap .view_wrap .view_info .view img {width: 14px; }
.feedback_view_wrap .view_wrap .view_info .right {color: #888; font-size: 12px; font-weight: 500;}

.is_web .navigate_header > .feedback_created_at {margin-top: -20px; margin-bottom: 20px; }





/** term_page */
.term_page_wrap {flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 30px; padding-top: 30px; padding-bottom: 30px; overflow: hidden; }
.term_page_wrap > .term_box {flex:1;width: 100%; border: 1px solid #ECECEC; border-radius: 10px; overflow: auto; }



/** terms - modal */
.terms_modal {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 150;}
.terms_modal .modal_back {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5)}
.terms_modal .terms_box_wrap {display: flex; flex-direction: column; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: #FFF; }
.terms_modal .terms_box_wrap .modal_header {display: flex; justify-content: center; align-items: center; position: relative; height: 58px; padding: 0 40px; border-bottom: 1px solid #E9EEF6; }
.terms_modal .terms_box_wrap .modal_header h3 {font-size: 18px;}
.terms_modal .terms_box_wrap .modal_header button {position: absolute; top: 50%; transform: translate(0, -50%); padding: 10px; font-size: 0; }
.terms_modal .terms_box_wrap .modal_header .modal_go_back {left: 10px; }
.terms_modal .terms_box_wrap .modal_header .modal_go_back img {width: 9px; height: 17px; object-fit: contain; }
.terms_modal .terms_box_wrap .modal_header .modal_close {right: 10px; }
.terms_modal .terms_box_wrap .modal_header .modal_close img {width: 14px; height: 14px; object-fit: contain; }
.terms_modal .terms_box_wrap .modal_content {flex: 1; display: flex; padding: 25px 0; overflow: hidden; }
.terms_modal .terms_box_wrap .modal_content .terms {flex: 1; padding: 0 20px; overflow: auto; }



/** theme_setting */
.theme_setting_wrap {flex: 1; display: flex; flex-direction: column; }
.theme_setting_wrap .theme_select {margin-top: 20px; margin-bottom: 40px; }
.theme_setting_wrap .theme_select .swiper-slide {}
.theme_setting_wrap .theme_select .swiper-slide .sheet_modal {max-width: 260px; width: 100%; height: 360px; margin: 0 auto; border: 0px solid #DDD; border-radius: 20px; overflow: hidden;}
.theme_setting_wrap .theme_select .swiper-slide .sheet_header {display: flex; justify-content: space-between; align-items: center; padding: 10px; }
.theme_setting_wrap .theme_select .swiper-slide .sheet_header .member_info {display: flex; align-items: center; gap: 8px; }
.theme_setting_wrap .theme_select .swiper-slide .sheet_header .member_info .mb_img {width: 28px; height: 28px; border-radius: 32px; background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA; overflow: hidden; font-size: 0;}
.theme_setting_wrap .theme_select .swiper-slide .sheet_header .member_info .mb_img img {width: 100%; height: 100%; object-fit: cover;}
.theme_setting_wrap .theme_select .swiper-slide .sheet_header .member_info .mb_nick {font-size: 13px; font-weight: bold;}
.theme_setting_wrap .theme_select .swiper-slide .sheet_header .member_info .mb_membership {display: flex; align-items: center; padding: 4px 8px; border-radius: 13px; font-size: 10px; font-weight: bold; }

.theme_setting_wrap .theme_select .swiper-slide .sheet_header .membership_area {display: flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 32px; background: #FFF; }
.theme_setting_wrap .theme_select .swiper-slide .sheet_header .membership_area .free_member {line-height: 1em; } 
.theme_setting_wrap .theme_select .swiper-slide .sheet_header .membership_area .pro_member {display: flex; align-items: center; gap: 7px;}
.theme_setting_wrap .theme_select .swiper-slide .sheet_header .membership_area .pro_member > div {display: flex; justify-content: center; align-items: center; gap: 5px;}
.theme_setting_wrap .theme_select .swiper-slide .sheet_header .membership_area .rest_img {width: 100%; font-size: 0;}
.theme_setting_wrap .theme_select .swiper-slide .sheet_header .membership_area .whole_group .rest_img {max-width: 16px;}
.theme_setting_wrap .theme_select .swiper-slide .sheet_header .membership_area .eighth_group .rest_img {max-width: 6px;}
.theme_setting_wrap .theme_select .swiper-slide .sheet_header .membership_area span {font-size: 10px; font-weight: bold; }


.theme_setting_wrap .theme_select .swiper-slide .dajim_area {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; position: relative; margin: 0 20px; min-height: 130px; }
.theme_setting_wrap .theme_select .swiper-slide .dajim_area .dajim_bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 0; }
.theme_setting_wrap .theme_select .swiper-slide .dajim_area .dajim_text {display: flex; justify-content: center; align-items: center; position: relative; line-height: 1.2em; }
.theme_setting_wrap .theme_select .swiper-slide .dajim_area .dajim_text p {position: relative; font-family: 'KNPSKkomi-Regular00', sans-serif; text-align: center; font-size: 14px; letter-spacing: -0.04em; }

.theme_setting_wrap .theme_select .swiper-slide .dajim_area.theme_basic .dajim_bg {background: url('/include/images/theme/theme_basic.png') no-repeat center / 100% 100%;}
.theme_setting_wrap .theme_select .swiper-slide .dajim_area.theme_basic .dajim_text p {font-family: 'WandohopeR', sans-serif; font-size: 16px; letter-spacing: -0.04em; }

.theme_setting_wrap .theme_select .swiper-slide .dajim_area.theme_1 .dajim_bg {
	top: 50%; transform: translate(0, -50%);
	height: 88px; 
	font-size: 0; 
}
.theme_setting_wrap .theme_select .swiper-slide .dajim_area.theme_1 .dajim_bg .theme_1_wrap {height: 100%; }
.theme_setting_wrap .theme_select .swiper-slide .dajim_area.theme_1 .dajim_bg .theme_1_wrap .line_wrap {display: flex; flex-direction: column; justify-content: center; gap: 10px; position: absolute; top: 0; left: 0; width: calc(100% + 40px); height: 100%; margin: 0 -20px; }
.theme_setting_wrap .theme_select .swiper-slide .dajim_area.theme_1 .dajim_bg .theme_1_wrap .line_wrap span {height: 2px; opacity: 0.07}
.theme_setting_wrap .theme_select .swiper-slide .dajim_area.theme_1 .dajim_bg .theme_1_wrap svg {
	width: auto; height: auto;
	max-width: 100%; 
	max-height: 100%; 
	
}

.theme_setting_wrap .theme_select .swiper-slide .dajim_area.theme_2 .dajim_bg {
	position: relative; 
	width: calc((53 / 390) * 100%); min-width: 53px; min-height: 69px; 
	padding-bottom: calc((69 / 390) * 100%);
	background: url('/include/images/theme/theme_2_img.png') no-repeat center / 100% 100%;
}

.theme_setting_wrap .theme_select .swiper-slide .dajim_area.theme_3 .dajim_bg {
	margin: 0 -20px; width: calc(100% + 40px); 
	background: url('/include/images/theme/theme_3_img_1.png') no-repeat center / 100% 100%;
}
.theme_setting_wrap .theme_select .swiper-slide .dajim_area.theme_3 .dajim_text {
	/* position: absolute; bottom: 5px; left: 0; */
	width: 70%; min-width: 205px; 
	padding: 20px; border-radius: 5px; background: rgba(255,255,255,0.95); 
}
.theme_setting_wrap .theme_select .swiper-slide .dajim_area.theme_3 .dajim_text:before {
	display: block; clear: both; content: ''; 
	position: absolute; bottom: -5px; left: 5px; width: 100%; height: 100%; border-radius: 5px; background: rgba(255,255,255,0.95); 
}

.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .sheet_content {padding: 10px 0; }
.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .sheet_content .cont_title {display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 0 20px; }
.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .sheet_content .cont_title h3 {font-size: 15px;}
.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .sheet_content .cont_title button {font-size: 12px; }
.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .sheet_content .more {
	width: 18px; height: 18px; background: var(--sheet-sub-color); font-size: 0; 
	mask-image: url('/include/images/theme/list_icon.svg');
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: 12px 10px;
}
.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .prac_content .today_at {padding: 10px 0; font-size: 12px; font-weight: bold; }

.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .prac_content .cont_con {padding: 0 20px; }
.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .prac_content .content {padding: 10px; border-radius: 10px; background: #FFF; }

.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .top {position: relative; background: url('/include/images/sheet_more_arrow.png') no-repeat right 0 center / 7px auto;}
.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .button_group {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 10px 0 0; }
.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .button_group .button_wrap {display: flex; flex-direction: column; gap: 10px;}
.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .button_group .button_wrap button {display: block; width: 34px; height: 34px; margin: 0 auto;}
.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .button_group .button_wrap.start button {background: url('/include/images/sheet_start_button.png') no-repeat center / contain;}
.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .button_group .button_wrap.stop button {background: url('/include/images/sheet_stop_button.png') no-repeat center / contain;}
.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .button_group .button_wrap.note button {background: url('/include/images/sheet_note_button.png') no-repeat center / contain;}
.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .button_group .button_wrap.metronome button {background: url('/include/images/sheet_metronome_button.png') no-repeat center / contain;}
.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .button_group .button_wrap.share button {background: url('/include/images/sheet_share_button.png') no-repeat center / contain;}
.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .button_group .button_wrap.attendance button {background: url('/include/images/sheet_att_off.png') no-repeat top 13px center / 16px auto, url('/include/images/sheet_att_off_bg.png') no-repeat center / contain;}
.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .button_group .button_wrap.attendance.checked button {background: url('/include/images/sheet_att_on.png') no-repeat top 21px center / 24px auto, url('/include/images/sheet_att_on_bg.png') no-repeat center / contain;}
.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .button_group .button_wrap span {display: none; width: 100%; text-align: center; font-size: 9px; font-weight: 500;}

.theme_setting_wrap .theme_select .swiper-slide .prac_content .prac_list_ul {padding: 12px 0; }
.theme_setting_wrap .theme_select .swiper-slide .prac_content .prac_list_ul li {position: relative; display: flex; align-items: center; flex-wrap: wrap; padding: 7px 0; }
.theme_setting_wrap .theme_select .swiper-slide .prac_content .prac_list_ul li .cat_color {width: 5px; height: 16px; border-radius: 4px; }
.theme_setting_wrap .theme_select .swiper-slide .prac_content .prac_list_ul li > h4 {padding: 0 7px 0 12px; font-size: 14px;}
.theme_setting_wrap .theme_select .swiper-slide .prac_content .prac_list_ul li > div {color: #747474; font-size: 9px; font-weight: 500; word-break: keep-all;}

.theme_setting_wrap .theme_select .swiper-slide .prac_content .prac_list_ul li.wait_li .cat_color {background: #FF7E7E; }
.theme_setting_wrap .theme_select .swiper-slide .prac_content .prac_list_ul li.doing_li .cat_color {background: #F5D835; }
.theme_setting_wrap .theme_select .swiper-slide .prac_content .prac_list_ul li.done_li .cat_color {background: #8DD940; }

.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .prac_content .prac_stat {display: flex; align-items: center; padding: 10px 0; }
.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .prac_content .prac_stat .cat_color {width: 7px; height: 20px; border-radius: 4px; }
.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .prac_content .prac_stat h4 {padding: 0 5px 0 10px; font-size: 12px;}
.theme_setting_wrap .theme_select .swiper-slide .sheet_modal .prac_content .prac_stat p {color: #747474; font-size: 10px; font-weight: 500;}

.theme_setting_wrap .theme_select .swiper-pagination {position: static; margin-bottom: 15px; font-size: 12px; font-weight: bold;}
.theme_setting_wrap .theme_select .swiper-pagination .swiper-pagination-current {font-weight: normal;}
.theme_setting_wrap .swiper-button-prev, .theme_setting_wrap .swiper-button-next {width: 18px; height: 34px; color: #4D5363;}
.theme_setting_wrap .swiper-button-prev {left: 0; background: url('/include/images/theme_prev_arrow2.png') no-repeat center/contain; }
.theme_setting_wrap .swiper-button-prev:after {content: '';}
.theme_setting_wrap .swiper-button-next {right: 0; background: url('/include/images/theme_next_arrow2.png') no-repeat center/contain; }
.theme_setting_wrap .swiper-button-next:after {content: '';}
.theme_setting_wrap .theme_color {flex: 1; display: flex; flex-direction: column; padding: 20px; background: #FAFAFA; }
.theme_setting_wrap .theme_color > h6 {width: 100%; font-size: 12px; font-weight: bold;}
.theme_setting_wrap .theme_color .pallete_wrap {flex: 1; display: flex; justify-content: center; align-items: flex-start;}
.theme_setting_wrap .theme_color .palette {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap: 20px; width: 100%; max-width: 480px; padding: 15px 0;}
.theme_setting_wrap .theme_color .palette li {position: relative; width: calc((100% - 80px) / 5); max-width: 80px; border: 1px solid #DDD; border-radius: 100%; overflow: hidden; }
.theme_setting_wrap .theme_color .palette li:after {
	display: block; clear: both; content: ''; 
	position: static; top: 0; left: 0; width: 100%; height: 100%; padding-bottom: 100%;
	
}
.theme_setting_wrap .theme_color .palette li.on:after {background: url('/include/images/chk_icon.png') no-repeat center/ 70%, rgba(0,0,0,0.07)}

.theme_setting_wrap .button_area {}
.theme_setting_wrap .button_area button {
	display: block; 
	/* position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); max-width: 1000px; width: calc(100% - 40px); */ 
	width: 100%; height: 52px; border-radius: 10px; background: #C5211F; color: #FFF; font-size: 16px; font-weight: bold; 
}
.theme_setting_wrap .button_area:after {display: none; clear: both; content: ''; height: 52px; margin-bottom: 20px; }




/** float banner */
.store_banner {display: flex; justify-content: center; align-items: flex-end; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 0; z-index: 250; }
.store_banner.hide {display: none;}
.store_banner .store_bn_back {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4);}
.store_banner .store_bn_box {position: relative; width: 100%; max-width: 800px;}
.store_banner .store_bn_box > div {background: #FFF; }
.store_banner .store_bn_box .mob_box {padding: 20px; border-radius: 10px 10px 0 0; }
.store_banner .store_bn_box .mob_box .img_wrap {max-width: 80px; margin: 20px auto; border-radius: 100%; border: 1px solid #000; background: url('/include/images/float_banner_img.png') no-repeat center/contain;
	-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
	-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
}
.store_banner .store_bn_box .mob_box .img_wrap:before {display: block; clear: both; content: ''; padding-bottom: 100%; }
.store_banner .store_bn_box .mob_box .desc {margin-top: 25px; line-height: 26px; text-align: center; font-size: 16px; font-weight: 500;}
.store_banner .store_bn_box .mob_box .go_store_button {margin-top: 35px; }
.store_banner .store_bn_box .mob_box .go_store_button button {display: block; width: 100%; height: 52px; border-radius: 6px; background: #000; color: #FFF; font-size: 15px; font-weight: 500; }
.store_banner .store_bn_box .mob_box .view_to_mob {margin-top: 10px; text-align: center; }
.store_banner .store_bn_box .mob_box .view_to_mob button {padding: 10px; text-align: center; color: #BDBDBD; font-size: 13px; font-weight: 500;}
.store_banner .store_bn_box .pc_box {display: none; border-radius: 10px; }



/** calendar */



/** calendar - period button */
.list_period {display: flex; align-items: center; flex-wrap: wrap; gap: 15px;}
/* .list_period .calendar_button {display: flex; justify-content: center; align-items: center; gap:6px; padding: 8px 15px; border: 1px solid #000; border-radius: 6px; font-size: 0;}
.list_period .calendar_button img {width: 14px; height: 14px; object-fit: contain; }
.list_period .calendar_button span {font-size: 12px; } */

.list_period .calendar_button {position: relative; width: 115px; background: #FFF; overflow: hidden;}
.list_period .calendar_button input[type="text"] {position: relative; display: block; width: 100%; padding: 8px 0 8px 23px; border: 0; background: none; font-size: 15px; outline: none; }
.list_period .calendar_button:before {display: block; clear: both; content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 15px; height: 16px; background: url('/include/images/calendar_icon2.png') no-repeat center / contain;}
.list_period .calendar_button:after {display: block; clear: both; content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 10px; height: 5px; background:  url('/include/images/calendar_arrow.png') no-repeat center / contain;}


/** calendar - modal */


/** confirm - modal */
.confirm_modal {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 300;}
.confirm_modal .modal_back {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5)}
.confirm_modal .confirm_box_wrap {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 800px;}
.confirm_modal .confirm_box_wrap .confirm_box {width: 100%; padding: 10px 0; background: #FFF; border-radius: 10px; }
.confirm_modal .confirm_box_wrap .confirm_box .confirm_text {padding: 20px 30px; }
.confirm_modal .confirm_box_wrap .confirm_box .confirm_text h6 {font-size: 16px; font-weight: 500;}
.confirm_modal .confirm_box_wrap .confirm_box .confirm_text .desc {margin-top: 5px; color: #747474; font-size: 13px; }
.confirm_modal .confirm_box_wrap .confirm_box .button_group {display: flex; }
.confirm_modal .confirm_box_wrap .confirm_box .button_group button {flex: 1; padding: 20px 0; font-size: 16px; }
.confirm_modal .confirm_box_wrap .confirm_box .button_group button.cancel {color: #747474; }
.confirm_modal .confirm_box_wrap .confirm_box .button_group button.confirm {font-weight: bold;}



/** prepare - modal */
#prepare_modal {z-index: 350;}
#prepare_modal .confirm_text {line-height: 1.3em; text-align: center; font-size: 15px; font-weight: bold; word-wrap: nowrap; word-break: keep-all;}


/** confirm - modal - pro */
#pro_container .confirm_box_wrap,
#is_member_confirm_modal .confirm_box_wrap {display: flex; flex-direction: column; position: absolute; top: auto; bottom: 0; transform: translate(-50%, 0); width: 100%; max-width: 1000px; height: 100%; padding: 0;}

#pro_container .confirm_box_wrap .confirm_box,
#is_member_confirm_modal .confirm_box_wrap .confirm_box {flex: 1; position: relative; padding: 100px 20px; }

#pro_container .confirm_box_wrap .confirm_box:before,
#is_member_confirm_modal .confirm_box_wrap .confirm_box:before {
	display: block; clear: both; content: ''; 
	position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0;
	background: url('/include/images/pro_confirm_bg.png') no-repeat top 60px center / 130% auto;
	opacity: 0.07;
}
#pro_container .confirm_box_wrap .confirm_box > div,
#is_member_confirm_modal .confirm_box_wrap .confirm_box > div {position: relative;}
#pro_container .confirm_box_wrap .confirm_box .cancel,
#is_member_confirm_modal .confirm_box_wrap .confirm_box .cancel {position: absolute; top: 50px; right: 15px; padding: 5px; z-index: 2;}
#pro_container .confirm_box_wrap .confirm_box .cancel img,
#is_member_confirm_modal .confirm_box_wrap .confirm_box .cancel img {width: 17px; height: 17px; }
#pro_container .confirm_box_wrap .confirm_box .logo,
#is_member_confirm_modal .confirm_box_wrap .confirm_box .logo {width: 134px; margin: 0 auto; text-align: center; }
#pro_container .confirm_box_wrap .confirm_box .text,
#is_member_confirm_modal .confirm_box_wrap .confirm_box .text {margin: 40px 0 60px; text-align: center; }
#pro_container .confirm_box_wrap .confirm_box .text p,
#is_member_confirm_modal .confirm_box_wrap .confirm_box .text p {line-height: 1.3em; font-size: 15px; }
#pro_container .confirm_box_wrap .confirm_box .text strong,
#is_member_confirm_modal .confirm_box_wrap .confirm_box .text strong {display: block; padding-top: 10px; line-height: 1.5em; font-size: 20px;}
#pro_container .confirm_box_wrap .confirm_box .confirm,
#is_member_confirm_modal .confirm_box_wrap .confirm_box .confirm {display: block; width: 100%; height: 56px; border-radius: 10px; background: #C5211F; color: #FFF; font-size: 16px; font-weight: bold; }



/** post - modal */
.option_modal {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 200;}
.option_modal .modal_back {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5);}
.option_modal .modal_box_wrap {position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 100%; }
.option_modal .modal_box_wrap .modal_box {padding: 30px 20px; border-radius: 15px 15px 0 0; background: #FFF; }
.option_modal .modal_box_wrap .modal_box .modal_top {position: relative; }
.option_modal .modal_box_wrap .modal_box .modal_top h4 {font-size: 18px; font-weight: bold;}
.option_modal .modal_box_wrap .modal_box .modal_top button {position: absolute; top: 50%; right: -10px; transform: translateY(-50%); padding: 10px; font-size: 0; }
.option_modal .modal_box_wrap .modal_box .modal_top button img {width: 14px; height: 14px; object-fit: cover}
.option_modal .modal_box_wrap .modal_box .option_modal_submit {display: none; margin-top: 20px; }
.option_modal .modal_box_wrap .modal_box .option_modal_submit button {width: 100%; padding: 10px 0; text-align: left; font-size: 15px; font-weight: 500;}
.option_modal .modal_box_wrap .modal_box .report_reason {/* display: none; */ margin-top: 20px; }
.option_modal .modal_box_wrap .modal_box .report_reason button {width: 100%; padding: 10px 0; text-align: left; font-size: 15px; font-weight: 500;}



/** page modal - common */
.page_modal {display: none; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 205;}
.page_modal .modal_back {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.4}
.page_modal .page_modal_box {display: flex; flex-direction: column; position: relative; width: 100%; height: 100%; background: #FFF; }
.page_modal .box_top {display: flex; justify-content: center; align-items: center; position: relative; height: 58px; }
.page_modal .box_top h2 {text-align: center; font-size: 18px;}
.page_modal .box_top .close {position: absolute; left: -5px; padding: 10px; font-size: 0;}
.page_modal .box_top .close img {width: 15px; height: auto; object-fit: cover;}
.page_modal .box_top .submit {position: absolute; right: 0; width: 56px; height: 30px; border: 1px solid #EBEBEB; border-radius: 15px; text-align: center; color: #5F5F5F; font-size: 15px; font-weight: 500; }



/** add_teacher_modal */
#add_teacher_modal .page_modal_box {}
#add_teacher_modal #add_teacher_form {padding-top: 28px;}
#add_teacher_modal #add_teacher_form .input_form .input_wrap {margin-bottom: 20px;}



/** editor_modal */
.edit_modal .editor_head {display: flex; justify-content: space-between; align-items: center; margin: 30px 0 0;}
.edit_modal .editor_head .cate_wrap {display: flex; align-items: center; }
.edit_modal .editor_head .cate_wrap .cat_badge {display: flex; align-items: center; position: relative; }
.edit_modal .editor_head .cate_wrap .cat_badge input {position: absolute; width: 1px; height: 1px; margin: -1px; outline: none; appearance: none; }
.edit_modal .editor_head .cate_wrap .cat_badge span {padding: 8px 17px; border-radius: 20px; border: 1px solid #BDBDBD; color: #BDBDBD; font-size: 15px; font-weight: 500;}
.edit_modal .editor_head .cate_wrap .cat_badge .cate_feedback:checked ~ span {border: 1px solid #2E75B6; background: #2E75B6; color: #FFF; }
.edit_modal .editor_head .student_area {font-size: 15px; font-weight: 500;}

.edit_modal .editor_body {margin: 20px -20px 0; }
.edit_modal .editor_body .editor_tools {display: flex; align-items: center; gap: 10px; padding: 0 15px; border-top: 1px solid #EDEDED;}
.edit_modal .editor_body .editor_tools button {width: 36px; height: 36px; }
.edit_modal .editor_body .editor_tools .color {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; }
.edit_modal .editor_body .editor_tools .color img {width: 12px; object-fit: contain; }
.edit_modal .editor_body .editor_tools .color .palette {width: 20px; height: 5px; border-radius: 1px; background: #000;}
.edit_modal .editor_body .editor_tools button.active {background: #EDEDED; }
.edit_modal .editor_body .editor_textarea {position: relative; border-top: 1px solid #EDEDED; border-bottom: 1px solid #EDEDED; font-size: 0; }
.edit_modal .editor_body .editor_textarea textarea {display: block; width: 100%; padding: 20px; border: 0; font-size: 16px; outline: none; resize: none; }
.edit_modal .editor_body .editor_textarea .ins_editor_img {
	display: block; 
	position: absolute; top: 0; right: 15px; width:36px; height: 36px; 
	background: url('/include/images/photo_icon.png') no-repeat center /auto 16px; 
	font-size: 0; 
}
.edit_modal .editor_body .input_area {padding-bottom: 40px; }
.edit_modal .editor_body .input_area dl {margin: 30px 0 0; padding: 0 20px; }
.edit_modal .editor_body .input_area dt {display: flex; align-items: center; gap: 4px; }
.edit_modal .editor_body .input_area dt img {width: 18px; height: 18px; object-fit: contain; }
.edit_modal .editor_body .input_area dt span {color: #3D3D3D; font-size: 14px; font-weight: 500;}
.edit_modal .editor_body .input_area dd {margin: 10px 0 0;}
.edit_modal .input_wrap input {border-bottom: 1px solid #F1F2F4; }
.edit_modal .input_ytb input {border-bottom: 1px solid #B6B9C2; }




/** today_prac_modal */
#today_prac_modal {}
#today_prac_modal .modal_back {opacity: 1; }
#today_prac_modal .page_modal_box {display: flex; flex-direction: column; width: 100%; max-width: 500px; background: #000; }
#today_prac_modal .header_wrap {width: 100%; }
#today_prac_modal .header_wrap .close {filter: invert(100%);}
#today_prac_modal .header_wrap h2 {color: #FFF; }
#today_prac_modal .box_content {flex: 1; }
#today_prac_modal .today_prac_swiper {width: 100%; height: 100%; }
#today_prac_modal .today_prac_swiper * {}
#today_prac_modal .today_prac_swiper .swiper-slide {display: flex; flex-direction: column; }
#today_prac_modal .today_prac_swiper .swiper-slide .img_area {flex: 1; display: flex; align-items: center; padding: 0 20px; }
#today_prac_modal .today_prac_swiper .swiper-slide .img_wrap {position: relative; width: 100%; overflow: hidden; }
#today_prac_modal .today_prac_swiper .swiper-slide .img_wrap:before {display: block; clear: both; content: ''; padding-bottom: 100%; }
#today_prac_modal .today_prac_swiper .swiper-slide .img_wrap img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}	
#today_prac_modal .today_prac_swiper .swiper-slide .info_area {display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 15px 20px 30px; }
#today_prac_modal .today_prac_swiper .swiper-slide .pf_info {display: flex; align-items: center; gap: 8px; }
#today_prac_modal .today_prac_swiper .swiper-slide .pf_info .pf_img {position: relative; width: 34px; height: 34px; border-radius: 34px; overflow: hidden; }
#today_prac_modal .today_prac_swiper .swiper-slide .pf_info .pf_img.no_img {background: url('/include/images/no_img_bg.png') no-repeat center/cover, #F5F7FA; }
#today_prac_modal .today_prac_swiper .swiper-slide .pf_info .pf_nick {color: #FFF; font-size: 16px; font-weight: bold;}
#today_prac_modal .today_prac_swiper .swiper-slide .like_wrap {display: flex; align-items: center; gap: 7px; }
#today_prac_modal .today_prac_swiper .swiper-slide .cnt {color: #FFF; }
#today_prac_modal .today_prac_swiper .swiper-slide .like {cursor: pointer;}
#today_prac_modal .today_prac_swiper .swiper-slide .like img {height: 20px; width: auto; object-fit: contain; }



/** write_feedback_modal */
#write_feedback_modal {}
#write_feedback_modal #f_write_feedback {flex: 1; display: flex; flex-direction: column; margin-top: -5px; overflow: hidden; }
#write_feedback_modal .calendar_wrap {display: flex; justify-content: center; align-items: center; gap: 5px; }
#write_feedback_modal .calendar_wrap button {display: flex; justify-content: center; align-items: center; gap: 6px; }
#write_feedback_modal .calendar_wrap span {line-height: 16px; color: #BDBDBD; font-size: 15px; }
#write_feedback_modal .calendar_wrap img {width: 15px; height: auto; object-fit: contain;}
#write_feedback_modal .scroll_area {flex: 1; overflow: auto;}

/** write_community_modal */
#write_community_modal .page_modal_box {height: 550px; max-height: 100vh; overflow: hidden;}
#write_community_modal #write_community_form {flex: 1; display: flex; flex-direction: column; overflow: auto; margin: 0 -20px; padding: 0 20px; }
#write_community_modal .editor_body {flex: 1; margin: 20px 0 0; }
#write_community_modal .editor_textarea {height: 100%; }
#write_community_modal .editor_textarea textarea {height: 100%; }



/** audio design */
.audio_box {}
.audio_box .audio_layout {display: flex; align-items: center; width: 100%; max-width: 500px; height: 40px; border: 1px solid #DDD; border-radius: 10px; overflow: hidden;}
.audio_box .audio_layout button {width: 40px; height: 100%; border-right: 1px solid #DDD; font-size: 0; cursor: pointer;}
.audio_box .audio_layout button i {font-size: 24px; font-weight: bold; }
.audio_box .audio_layout .play_wrap {flex: 1; display: flex; justify-content: space-evenly; align-items: center; gap: 10px; padding: 0 10px; }
.audio_box .audio_layout .play_wrap .progress_wrap {flex: 1; position: relative; height: 6px; border-radius: 0; /* overflow: hidden; */}
.audio_box .audio_layout .play_wrap .progress_wrap .cover {position: relative; width: 100%; height: 100%; border: 1px solid #DDD; border-radius: 0; }
.audio_box .audio_layout .play_wrap .progress_wrap .fill {display: flex; align-items: center; position: absolute; top: 0; left: 0; height: 100%; border-radius: 0; background: #C5211F; }
.audio_box .audio_layout .play_wrap .progress_wrap .control {
	position: absolute; right: 0; transform: translateX(50%); 
	width: 10px; height: 10px; border-radius: 10px; background: #C5211F; cursor: pointer;
}
.audio_box .audio_layout .play_wrap .time {min-width: 35px; line-height: 1em; font-size: 12px; font-weight: 500;}



/** toast message */
.toast_wrap {display: none; position: fixed; bottom: 5%; left: 50%; transform: translate(-50%, 50%); -webkit-transform: translate(-50%, 50%); width: 100%; padding: 0 20px; z-index: 310;}
.toast_wrap .toast_text {max-width: 500px;padding: 12px;margin: 0 auto;border-radius: 15px;background: rgba(0,0,0,0.55);font-size: 16px;text-align: center;color: #FFF;font-weight: bold;}
body.device .toast_wrap, body.mac .toast_wrap, body.pc .toast_wrap {bottom: 50%;}



/** timer */
.base-timer {
    position: relative;
    width: 70px;
    height: 70px;
	margin: auto;
}

.base-timer__svg {
    transform: scaleX(1);
}

.base-timer__circle {
    fill: none;
    stroke: none;
}

.base-timer__path-elapsed {
    stroke-width: 6px;
    stroke: #EDEDED;
}

.base-timer__path-remaining {
    stroke-width: 6px;
    /* stroke-linecap: round; */
    transform: rotate(90deg);
    transform-origin: center;
    transition: 1s linear all;
    fill-rule: nonzero;
    stroke: currentColor;
}

.base-timer__path-remaining.green {
    color: #39b37d;
}

.base-timer__path-remaining.orange {
    color: orange;
}

.base-timer__path-remaining.red {
    color: red;
}

.base-timer__label {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    font-weight: bold;
}


/** loading */
#indicator {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 50%; transform: translateX(-50%) rotate(0deg);
  animation: spin 1s linear infinite;
}

#circle {
  fill: none;
  stroke: rgba(0,0,0,1);
  /* stroke-linecap: round; */
  stroke-width: 10;
  stroke-dasharray: 200, 282.6;
  /* animation: draw 3s ease-in-out infinite; */
}

@keyframes draw {
  0% { stroke-dasharray: 20, 282.6;}
  50% { stroke-dasharray: 200, 282.6; }
  100% { stroke-dasharray: 20, 282.6; }
}

@keyframes spin {
  to { transform: translateX(-50%) rotate(360deg); }
}

/** data loading */
.data_loading {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.4); z-index: 305; }
.data_loading .box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 40px; background: rgba(0,0,0,0.6); border-radius: 10px; }
.data_loading #indicator {position: relative; top: 0;}
.data_loading #circle {stroke: rgba(255, 255, 255, 1);}
.data_loading .text {padding-top: 15px; color: #FFF; font-size: 16px; font-weight: bold; }

.data_loading2 {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 305; }



@media screen and (min-width: 375px){
	/** input */
	.tip_bubble .tip_desc {
		max-width: calc((58 / 100) * 100vw); 
	}

	#main_header .logo {position: absolute; }
	#main_header .hd_tab {justify-content: center; }
	#main_header .top_menu {position: absolute; }




	/** regist */
	.regist_wrap .modal .modal_content {max-width: 580px; }
	#dajim_modal .modal_content {max-width: 580px; }



	/** main - contents */
	#main_contents .bottom_cont .quiz_wrap ul li {background: url('/include/images/more_black.png') no-repeat right 12px center/ 6px 9px, #F8F8F9;}


	/** shop */
	.rest_shop .info_block .rest_info b {font-size: 17px;}
	.rest_shop .info_block .rest_info span {font-size: 15px; }
	.rest_shop .info_block .rest_text {font-size: 13px;}



	/** membership */
	.membership_cate li .cate {width: 70px; line-height: 30px; }
	.membership_cate li .price {padding-top: 15px; font-size: 17px; }

}

@media screen and (min-width: 640px){
	/** input */
	.input_form > label {}
	.wrap_in_button button > span {font-size: 13px;}


	
	/** - button */
	.submit_button .text {font-size: 17px; }
	.more_button {margin-top: 20px; }



	/** - radio */
	.radio_label div span {font-size: 15px; }



	/** select */
	.select_wrap .select_ul li {padding: 7px 20px; font-size: 16px; }

	

	/** select box */
	.select_box_wrap .sel_label {font-size: 15px; }
	.select_box_wrap .arrow {width: 12px; height: 12px; }


	
	/** - web post header */
	.sub_wrap .post_header .view_option_button img {width: 21px; height: 21px; }



	/** login */
	/* .is_web.sub_wrap .login_wrap .screen_inner {padding: 100px 0 120px;} */
	.is_web.sub_wrap .login_logo {padding: 0 0 100px; }
	.login_button_group > a {font-size: 16px;}
	
	
	
	/** certify */
	.is_web.sub_wrap .certify_wrap .screen_container {padding-top: 100px; padding-bottom: 80px; }
	.certify_wrap .inq_email a {font-size: 16px; }


	/** regist */
	/** find_email */
	/** find_result */
	.is_web.sub_wrap .find_result_wrap .screen_container {padding-top: 130px; padding-bottom: 80px; }
	.find_result_wrap .inq_email a {font-size: 16px; }
	
	
	/** find_pw */
	.is_web.sub_wrap .find_pw_wrap .screen_container {padding-top: 100px; padding-bottom: 80px; }
	.find_pw_wrap .inq_email a {font-size: 16px; }


	/** menu */
	#open_menu .menu_bar .close_area .pro_member {height: 28px;}
	#open_menu .menu_bar .close_area .pro_member > div span {font-size: 15px; }
	#open_menu .menu_bar .close_area .pro_member .whole_group .rest_img {max-width: 25px; }
	#open_menu .menu_bar .close_area .pro_member .eighth_group .rest_img {max-width: 9px; height: 16px;}

	#open_menu .menu_bar .info_wrap .info .nick {font-size: 20px;}
	#open_menu .menu_bar .info_wrap .logout_button {font-size: 16px; }
	#open_menu .menu_bar .info_area .follow_ul {}
	#open_menu .menu_bar .info_area .follow_ul li .head {font-size: 16px; }
	#open_menu .menu_bar .info_area .follow_ul li .body {font-size: 16px; }
	#open_menu .menu_bar .membership_area {padding: 13px 15px; }
	#open_menu .menu_bar .membership_area .level {font-size: 15px; }
	#open_menu .menu_bar .membership_area .period {font-size: 17px; }

	#open_menu .menu_bar .menu_body {padding-bottom: 126px; }
	#open_menu .menu_bar .menu_body > .menu_group {margin: 0 30px; }
	#open_menu .menu_bar .menu_body > .menu_group h4 {font-size: 18px; }
	#open_menu .menu_bar .menu_body > .menu_group ul li a {font-size: 18px; }
	#open_menu .menu_bar .menu_body > .menu_group ul li a:after {width: 9px; height: 15px; }

	#open_menu .menu_bar .shop button {max-width: none; width: 380px; height: 56px; border-radius: 56px; font-size: 16px; }



	/** header */
	.screen_info {margin-bottom: 50px; }
	.screen_info h3 {font-size: 22px; }
	.screen_info span {font-size: 17px; }

	.follow_search_button img {width: 18px; }

	.is_web .navigate_header {height: 84px; border-bottom: 1px solid #F5F5F5; }
	.is_web .navigate_header .header_wrap {flex: 1; width: auto; }
	.is_web .navigate_header .extra_wrap {max-width: 350px; }
	
	.is_web .header_wrap h2 {font-size: 24px;}



	/** - web list header */
	.web_navigate_header h2 {font-size: 24px; }




	/** main_header */
	#main_header .top {height: 80px; padding-top: 0; }
	#main_header .logo {padding: 35px 0; }
	#main_header .logo img {width: 127px; }
	#main_header .top_menu {order: 3;}
	#main_header .top_menu .mo_menu:before {width: 20px; }
	#main_header .top_menu .mo_menu:after {width: 20px; }
	#main_header .top_menu .mo_menu span {width: 20px; margin: 5px 0; }
	#main_header .top_menu ul {gap: 15px; }
	#main_header .top_menu ul li {width: 68px;}
	#main_header .top_menu ul li span {font-size: 15px; }

	#main_header .hd_tab {order: 2; flex: 1; width: auto; justify-content: center; align-items: center; gap: 10px; }
	#main_header .hd_tab ul {gap: 36px; }
	#main_header .hd_tab ul li a {padding: 14px 0px; font-size: 17px; }


	
	/** footer */
	footer .ft_top ul li a {padding: 25px 35px; font-size: 16px;}
	footer .ft_info ul {flex-direction: row; align-items: center; }
	footer .ft_info ul li:before {display: inline-block;}


	
	/** main */
	.main_wrap .media_cont .cont_title {margin-top: -16px; padding-top: 50px; }
	.main_wrap .media_cont .cont_title > div {padding: 16px 0; }



	/** main - contents (masonry - multicol_layout) */
	#main_contents {background: #F7F7F7;}

	#main_contents .media_cont {padding-bottom: 90px; background: url('/include/images/media_contents_bg_web.png') no-repeat bottom 60px center;}
	#main_contents .media_cont .title_more_button img {display: none; }
	#main_contents .media_cont .title_more_button span {display: block; color: #FFF; font-size: 13px; font-weight: 500; }
	#main_contents .media_cont .cont_con {background: none; }
	#main_contents .media_cont .cont_con .inner {padding: 0 20px; }
	#main_contents .media_cont .media-slide {width: calc((100% - 26px) / 2 - 25px)}
	#main_contents .media_cont .swiper-pagination {padding-top: 90px; }

	#main_contents .masonry_cont {display: block; column-count: 2; column-gap: 0; width: 100%; max-width: 1000px; margin: -15px auto; padding-left: 10px; padding-right: 10px; }
	#main_contents .masonry_cont > div:not(.store_banner) {padding: 15px 10px; margin: 0; }
	#main_contents .masonry_cont > div .wrap {border-radius: 10px; 
		-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
		-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
	}
	
	/** main - contents (masonry - flex) */ /*
	#main_contents .masonry_cont {display: flex; flex-direction: column; flex-wrap: wrap; gap: 30px 20px; max-height: 1500px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
	#main_contents .masonry_cont > div {width: calc((100% - 20px) / 2); padding: 0; float: left; }

	#main_contents .masonry_cont > .concert {order: 1; }
	#main_contents .masonry_cont > .banner {order: 2; }
	#main_contents .masonry_cont > .news {order: 3; }
	#main_contents .masonry_cont > .wow {order: 4; }
	#main_contents .masonry_cont > .today_prac {order: 5; }
	#main_contents .masonry_cont > .quiz {order: 6; }
	*/



	#main_contents .masonry_cont > .banner .wrap {padding: 0 20px; background: none; 
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
	/* #main_contents .masonry_cont > .banner .ads_swiper .swiper-slide:before {padding-bottom: calc((18 / 44) * 100%); } */
	
	

	.is_web #main_contents {padding-bottom: 135px;}

	/** main - contents - news */
	.news_list_wrap {background: #F9F9F9;}
	.news_list_wrap > .bn_cover_wrap {margin-top: 30px; }
	.news_list {flex-direction: row; flex-wrap: wrap; gap: 15px 20px;}
	.news_list > li:not(.empty_li) {width: calc((100% - 20px) / 2); padding: 15px; border: 0; border-radius: 10px; 
		-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
		-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
	}
	.news_list > li .news_img {width: 40%; max-width: 160px; }
	/* .news_list > li .news_img:after {padding-bottom: calc((120 / 160) * 100%);} */

	.news_list > li.empty_li {border: 0; }



	/** main - contents - concert - list */
	.concert_list_wrap .bn_cover_wrap {margin-top: 30px; }
	.concert_list_wrap .strap_calender {border: 0; }
	.concert_list_wrap .strap_swiper .swiper-slide .week_days {display: none; }
	.concert_list_wrap .strap_swiper .swiper-slide .date_wrap.active .week_date {background: #C5211F; color: #FFF; }
	
	.concert_list {display: flex; flex-wrap: wrap; gap: 15px 20px;}
	.concert_list > li:not(.empty_li) {width: calc((100% - 20px) / 2); padding: 0; border: 0; border-radius: 10px; 
		-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
		-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
	}
	.concert_list > li .wrap {gap: 0; }
	.concert_list > li .concert_img {border-radius: 10px 0 0 10px;}
	.concert_list > li .concert_img:after {}
	.concert_list > li .concert_info {display: flex; flex-direction: column; justify-content: center; padding: 20px;}

	.concert_list > li.empty_li {width: 100%; border: 0; }

	.is_web .concert_list_wrap {padding-bottom: 150px; background: #F9F9F9;}



	/** main - contents - concert - view */
	.concert_view_nav_header .nav_inner h2 {font-size: 28px; }
	.concert_view_nav_header .nav_inner h2 {font-size: 22px; }
	.concert_view_wrap {background: #FFF; }
	.concert_view_wrap .view_top {display: flex; align-items: flex-start; flex-wrap: wrap; gap: 40px; padding: 30px 20px; }
	/* .concert_view_wrap .view_top .concert_title {text-align: left; } */
	.concert_view_wrap .view_top .concert_img {order: 2; min-width: unset; max-width: 400px; width: calc((4 / 10) * 100%); margin: 0; }
	/* .concert_view_wrap .view_top .concert_img:before {padding-bottom: calc((500 / 350) * 100%);} */
	.concert_view_wrap .view_top .concert_info {order: 3; flex: 1; display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
	.concert_view_wrap .view_top .concert_info > .header {width: 100%; font-size: 18px;}
	.concert_view_wrap .view_top .concert_info > .header .subject {padding-left: 10px; }
	.concert_view_wrap .view_top .concert_info > .info_label {width: 20%; margin: 0; font-size: 16px; }
	.concert_view_wrap .view_top .concert_info > .info_data {width: 80%; margin: 0; font-size: 16px; }
	.concert_view_wrap .view_bottom > .header {display: block; margin-bottom: 20px; padding-bottom: 20px; font-size: 18px; }



	/** main - contents - wow */
	.wow_list_wrap {background: #F6F5F3;}
	.wow_list_wrap .bn_cover_wrap {margin-top: 30px; }
	.wow_list {gap: 15px 20px; }
	.wow_list > li {
		width: calc((100% - 20px) / 2); padding: 20px; border-radius: 10px; 
		-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.16);
		-moz-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.16);
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.16);
	}

	.wow_view_wrap {display: flex; gap: 20px; width: 100%; max-width: 1000px; margin: 0 auto; padding: 20px; }
	.wow_view_wrap .view_top {width: calc((420 / 1000) * 100%); padding: 0 !important; }
	.wow_view_wrap .view_top .wow_img {min-width: unset; max-width: none; width: 100%; }
	.wow_view_wrap .view_top .wow_img:after {padding-bottom: calc((500 / 420) * 100%);}
	.wow_view_wrap .view_bottom {flex: 1; padding: 0; }
	.wow_view_wrap .view_bottom .header {padding-top: 40px; padding-bottom: 20px; border-bottom: 1px solid #E9EAF0;}
	.wow_view_wrap .view_bottom .view_content {font-size: 16px; }


	
	/** main - contents - quiz */
	.quiz_list_wrap {background: #F9F9F9; }
	.quiz_list {gap: 15px 20px; width: 100%; max-width: 1000px; margin: 0 auto; padding: 30px 20px; }
	.quiz_list > li {border-radius: 6px; }
	.quiz_list > li:not(.empty_li) {width: calc((100% - 20px) / 2); border: 0; background: #FFF;
		-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
		-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
	}


	
	/** main - contents - note_search */
	.sch_sort_wrap {margin-top: 0; padding-top: 30px; }

	



	/** main - contents - note list 공통 */



	/** main - challenge */
	#main_challenge .cont_title h3 {padding-top: 60px; padding-bottom: 30px; }
	#main_challenge .monthly_challenge {padding-top: 40px; }
	
	#main_challenge .swiper-wrapper {margin-bottom: 30px; }
	#main_challenge .swiper-slide .card_img .card_period {right: 0; width: 100%; text-align: center; font-size: 14px; }
	#main_challenge .swiper-slide .card_content .chall_count {padding: 15px 0 20px; font-size: 14px; }
	#main_challenge .swiper-slide .card_content .chall_ul > li {padding: 17px 20px; }
	#main_challenge .swiper-slide .card_content .chall_ul > li .o_num {width: 28px; height: 28px; line-height: 28px; font-size: 14px; }
	#main_challenge .swiper-slide .card_content .chall_ul > li .song_info .comp {font-size: 15px; }
	#main_challenge .swiper-slide .card_content .chall_ul > li .song_info .title {font-size: 14px; }

	#main_challenge .swiper-pagination {margin-bottom: 40px; }
	#main_challenge .swiper-pagination .swiper-pagination-bullet {width: 6px; height: 6px; border-radius: 6px; }
	#main_challenge .swiper-pagination .swiper-pagination-bullet-active {width: 30px;}

	#main_challenge .challenge_video {padding-bottom: 60px; }
	#main_challenge .challenge_video .chall_video_ul {flex-direction: row; }
	#main_challenge .challenge_video .chall_video_ul > li {width: calc((100% - 10px) / 2); padding: 20px; }
	#main_challenge .challenge_video .chall_video_ul > li .title {font-size: 18px; }
	#main_challenge .challenge_video .chall_video_ul > li .left img {height: 16px; }
	#main_challenge .challenge_video .chall_video_ul > li .left span {font-size: 16px; }
	#main_challenge .challenge_video .chall_video_ul > li .view img {height: 13px; }
	#main_challenge .challenge_video .chall_video_ul > li .view span {font-size: 16px; }

	#main_challenge .chall_button {padding-bottom: 60px; }



	/** main - challenge - list */
	.is_web .chall_list_wrap {padding-bottom: 130px; }
	.chall_list_wrap .chall_list_result > ul {display: flex; flex-wrap: wrap; gap: 30px 20px; width: 100%; max-width: 1000px; padding: 0 20px; margin: 0 auto; background: #FFF; }
	.chall_list_wrap .chall_list_result > ul > li {width: calc((100% - 20px) / 2); margin: 0; padding: 0; }



	/** main - challenge - view */
	.is_web .chall_card_view_wrap {margin-bottom: 110px; }
	.chall_card_view_wrap .view_wrap .card_info .chall_days {font-size: 17px; font-weight: 400;}
	.chall_card_view_wrap .view_wrap .card_info .chall_title {font-size: 23px; }
	.chall_card_view_wrap .view_wrap .card_info .chall_count {font-size: 15px; }
	.chall_card_view_wrap .song_list {flex-direction: row; flex-wrap: wrap; gap: 10px 20px; padding: 30px 20px; }
	.chall_card_view_wrap .song_list li {width: calc((100% - 20px) / 2);}
	.chall_card_view_wrap .song_list li .composer {font-size: 16px; font-weight: 500;}
	.chall_card_view_wrap .song_list li .title {font-size: 15px;}
	
	.chall_card_view_wrap .success_card_wrap > div {padding-top: 40px; font-size: 22px;}
	.chall_card_view_wrap .success_card_wrap ul {flex-direction: row; flex-wrap: wrap; gap: 10px 20px; margin-top: 20px; }
	.chall_card_view_wrap .success_card_wrap ul li {width: calc((100% - 20px) / 2);}
	

	

	/** main - community */
	.main_commu_top h2 {display: block; }
	#commu_search {max-width: 350px; }

	.post_list_ul {display: flex; flex-wrap: wrap; gap: 15px 20px; width: 100%; max-width: 1000px; margin: 0 auto; padding: 30px 20px; }
	.post_list_ul .post_item:not(.empty_li) {width: calc((100% - 20px) / 2); margin-top: 0; border: 1px solid #E0E0E3; border-radius: 10px; 
		-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
		-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
	}



	/** main - community - write */
	.is_web .commu_write_wrap {padding-bottom: 110px; }
	.commu_write_wrap .write_form_wrap {padding-top: 20px; }



	/** profile */
	.profile_content .post_area {padding: 0 20px; }

	.profile_content .post_area .profile_note {padding: 0; }
	.profile_content .post_area .note_ul {display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 50px; }
	.profile_content .post_area .note_ul li:not(.empty_li) {width: calc((100% - 20px) / 2); border-radius: 10px; 
		-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
		-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
	}

	.profile_content .post_area .profile_comp_prac {padding: 0; }
	.profile_content .post_area .comp_prac_ul {gap: 20px; padding: 0; padding-bottom: 130px; }
	.profile_content .post_area .comp_prac_ul > li {width: calc((100% - 60px) / 4); }
	.profile_content .post_area .comp_prac_ul > li:nth-child(n+3) {display: block;}

	.profile_content .post_area .title_wrap {order: 0; padding: 40px 0 20px; }
	.profile_content .post_area .title_wrap h2 {display: block; }
	.profile_content .post_area .title_wrap .more_button {width: auto; margin: 0; padding: 0; }
	.profile_content .post_area .title_wrap .more_button button {height: auto; border: 0; }
	.profile_content .post_area .title_wrap .more_button button span {font-size: 14px; font-weight: 500;}



	/** shop */
	.preparing p {font-size: 18px;}
	.preparing .icon {line-height: 1em; margin-bottom: 20px; font-size: 60px;}

	

	
	/** follow */
	.follow_tab {width: 100%; max-width: 1000px; padding: 0 20px; margin: 0 auto; }

	.follow_list .list_wrap ul {flex-direction: row; gap: 25px 20px; }
	.follow_list .list_wrap ul li:not(.empty_li){width: calc((100% - 20px) / 2);}
	.follow_list .list_wrap ul li .left .mb_img {width: 45px; height: 45px; border-radius: 45px;}
	.follow_list .list_wrap ul li .left .mb_nick {font-size: 15px; }
	.follow_list .list_wrap ul li .right button {width: 80px; }
	
	
	
	/** follow - challenge */
	.follow_chview_wrap .view_top .card_title {padding-bottom: 15px; }
	.follow_chview_wrap .song_list > li {padding: 40px 20px 30px; }
	.follow_chview_wrap .song_list > li:first-child {padding-top: 15px; }
	.follow_chview_wrap .song_list > li .composer {font-size: 17px;}
	.follow_chview_wrap .song_list > li .song_title {padding-top: 20px; font-size: 15px; }
	.follow_chview_wrap .song_list > li .media_cont {padding-top: 10px; padding-bottom: 10px; }
	.follow_chview_wrap .song_list > li .cont_text {font-size: 15px; }
	.follow_chview_wrap .view_info > div div img {height: 16px; }
	.follow_chview_wrap .view_info span {font-size: 16px; }
	.follow_chview_wrap .view_info > .view_count img {height: 13px; }
	.follow_chview_wrap .view_info span {font-size: 16px; }



	/** metronome */
	.metronome_wrap {max-width: 1000px; }
	/* .metronome_wrap .tickBoxWrap {min-height: 500px;} */
	.metronome_wrap .tick_box_wrap {gap: 0 20px; }
	/* .metronome_wrap .tick_box_wrap > div span {background: rgba(0,0,0,0.2);} */
	.metronome_wrap .tick_box_wrap span {width: 90px; height: 90px; border-radius: 90px; }
	.metronome_wrap .tick_box_wrap span:after {width: 50px; height: 50px; border-radius: 50px; }
	.metronome_wrap .tick_box_wrap > div:nth-child(1) span:after {background-size: 20px 25px}
	.metronome_wrap .tick_box_wrap.eighth > div:nth-child(3n) span:after, 
	.metronome_wrap .tick_box_wrap.eighth > div:nth-child(3n-1) span:after {width: 32px; height: 32px; border-radius: 32px; }

	.metronome_wrap .bpm_wrap button {width: 80px; height: 80px; border-radius: 80px; }
	.metronome_wrap .bpm_wrap button i {font-size: 28px;}
	.metronome_wrap .bpm_wrap .bpm_box span {font-size: 60px;}
	.metronome_wrap .bpm_wrap .bpm_box b {font-size: 18px; }

	.metronome_wrap .controls_wrap button {width: 80px; height: 80px; border-radius: 80px; }
	.metronome_wrap .controls_wrap .time_select span {}

	.metronome_wrap .controls_wrap button.play_button.play {background-size: 32px auto; background-position: left 26px center;}

	.metronome_wrap .controls_wrap button[data-notes='4'][data-parts='4'] {background-size: auto 24px;}
	.metronome_wrap .controls_wrap button[data-notes='4'][data-parts='8'] {background-size: auto 24px;}
	.metronome_wrap .controls_wrap button[data-notes='4'][data-parts='12'] {background-size: auto 40px; background-position: top 14px center; }
	.metronome_wrap .controls_wrap button[data-notes='4'][data-parts='12'][data-disabledIdx] {background-size: auto 40px; background-position: top 14px center; }
	.metronome_wrap .controls_wrap button[data-notes='4'][data-parts='16'] {background-size: auto 24px;}
	.metronome_wrap .controls_wrap button[data-notes='4'][data-parts='16'][data-disabledIdx] {background-size: auto 24px;}
	.metronome_wrap .controls_wrap button[data-notes='8'][data-multiple="3"]{background-size: auto 24px;}
	.metronome_wrap .controls_wrap button[data-notes='8']{background-size: auto 24px;}
	.metronome_wrap .controls_wrap button[data-notes='8'][data-disabledIdx]{background-size: auto 24px;}



	/** metronome - modal */
	.select_modal .modal_box_wrap {bottom: auto; top: 50%; transform: translate(-50%, -50%); border-radius: 15px; }



	/** member_edit */
	.leave_area {padding-bottom: 150px; }
	.leave_area .leave_button span {font-size: 15px; }


	
	/** point */
	.point_list_wrap .point_top .left h5 {font-size: 15px; }
	.point_list_wrap .point_top .left p {padding-top: 12px; font-size: 18px; }
	.point_list_wrap .point_top .right {height: 28px; }
	.point_list_wrap .point_top .right > div span {font-size: 15px; }
	.point_list_wrap .point_top .right .whole_group .rest_img {max-width: 25px; }
	.point_list_wrap .point_top .right .eighth_group .rest_img {max-width: 9px; height: 16px; }

	.point_list_wrap .point_wrap .point_list .list_period {margin: 30px 0; }

	.point_list_wrap .point_wrap {padding-bottom: 150px; }
	.point_list_wrap .point_wrap .point_tab {width: 100%; max-width: 1000px; padding: 0 20px 30px; margin: 0 auto; }
	.point_list_wrap .point_wrap .point_tab > ul > li span {font-size: 16px; }



	/** inquiry */

	.inquiry_view_wrap .inq_item {padding: 0; }
	.inquiry_view_wrap .inq_item .inq_top {gap: 5px; padding: 30px 20px; margin-bottom: 0; }
	.inquiry_view_wrap .inq_item .inq_top h4 {order: 2; width: auto; flex: 1; line-height: 1.2em; font-size: 15px; }
	.inquiry_view_wrap .inq_item .inq_top span {order: 1; font-weight: bold; }
	.inquiry_view_wrap .inq_item .inq_top .created_at {order: 3; }
	.inquiry_view_wrap .inq_item .inq_content {padding: 30px 20px 37px; }
	
	.inquiry_view_wrap .inq_reply .admin_reply {padding: 0; }
	.inquiry_view_wrap .inq_reply .admin_reply .reply_header {flex-direction: row; padding: 30px 20px; margin-bottom: 0; }
	.inquiry_view_wrap .inq_reply .admin_reply .reply_header h4 {flex: 1; }
	.inquiry_view_wrap .inq_reply .admin_reply .reply_content {padding:: 30px 20px; }
	.inquiry_view_wrap .inq_reply .empty_inq_reply {padding: 40px 0; }



	/** notice */
	.notice_list_wrap {margin-top: 10px; }
	.notice_list_wrap .list_ul > li {}

	.notice_view_wrap {padding: 0; }
	.notice_view_wrap .view_info {padding: 30px 20px; margin-bottom: 0; }
	.notice_view_wrap .view_info b {flex: 1; width: auto; }
	.notice_view_wrap .view_content {padding: 30px 20px; }
	


	/** lesson teacher list */
	.is_web .teacher_list_wrap .add_teacher_wrap {margin-top: 20px; }
	
	
	/** lesson student list */
	/** lesson feedback list */
	.feedback_list_wrap .feedback_list .list_ul {display: flex; flex-wrap: wrap; gap: 20px; padding: 0 20px; }
	.feedback_list_wrap .feedback_list .list_ul li:not(.empty_li) {width: calc((100% - 20px) / 2); border: 1px solid #EDEDED; border-radius: 10px; }
	
	
	/** lesson feedback view */
	.is_web .feedback_view_wrap {margin-top: 20px; }
	.is_web .feedback_created_at {margin-top: -20px; }




	/** reply common */
	.is_web .reply_write {margin-bottom: 150px; }



	/** terms - modal */
	.terms_modal .terms_box_wrap {max-width: 500px; height: 80vh; border-radius: 10px; overflow: hidden; }
	/* .terms_modal .terms_box_wrap .modal_header .modal_go_back {display: none; } */


	
	/** post - modal */
	.option_modal .modal_box_wrap {bottom: auto; top: 50%; transform: translate(-50%, -50%); max-width: 500px; }
	.option_modal .modal_box_wrap .modal_box {border-radius: 15px; }
	.option_modal .modal_box_wrap .modal_box .modal_top h4 {font-size: 20px;}
	.option_modal .modal_box_wrap .modal_box .modal_top button img {width: 18px; height: 18px;}
	.option_modal .modal_box_wrap .modal_box .report_reason button {font-size: 16px;}



	/** calendar - period button */
	.list_period .calendar_button:before {width: 16px; height: 16px;}
	.list_period .calendar_button input[type="text"] {font-size: 14px;}



	/** confirm - modal */
	.comfirm_modal .conform_box_wrap {max-width: 500px; }
	.comfirm_modal .conform_box_wrap .conform_box .confirm_text {font-size: 18px; }
	.comfirm_modal .conform_box_wrap .conform_box .confirm_text h6 {font-size: 18px;}
	.comfirm_modal .conform_box_wrap .conform_box .confirm_text .desc {font-size: 15px; }
	.comfirm_modal .conform_box_wrap .conform_box .button_group button {font-size: 18px;}




	/** today_prac_modal */
	#today_prac_modal .modal_back {opacity: 0.8;}
	#today_prac_modal .page_modal_box {height: auto; }
	#today_prac_modal .box_top {display: none; }
	#today_prac_modal .today_prac_swiper .swiper-slide .img_area {padding: 0; }
	#today_prac_modal .today_prac_swiper .swiper-slide .info_area {padding: 18px 20px; }



	/** timer */
	.base-timer {width: 100px; height: 100px; }
	.base-timer__label {font-size: 30px; }

}

@media screen and (min-width: 768px){
	/** regist */
	#agree_modal .modal_content {top: 50%; left: 50%; bottom: auto; transform: translate(-50%, -50%); border-radius: 15px; }
	#agree_modal .submit_button {margin-bottom: 0;}
	#dajim_modal .modal_content {left: 50%; transform: translate(-50%, -50%); }



	/** header */
	.web_navigate_header h2 {font-size: 28px; }



	/** main - contents */
	#main_contents .masonry_cont .cont_title h3 {font-size: 20px; }
	#main_contents .masonry_cont .cont_title .cont_more {font-size: 15px; }

	#main_contents .author_info .author_img {width: 32px; }
	#main_contents .author_info .author_nick {font-size: 14px;}
	
	#main_contents .media_cont .note_img .audio_note_img {font-size: 20px; }
	#main_contents .media_cont .note_info .note_top .created_at {font-size: 14px;}



	/** main - contents - concert */


	/** main - contents - wow */
	.is_web .wow_view_wrap {gap: 40px; }



	/** main - contents - note list 공통 */
	.practice_note {padding-top: 30px; padding-bottom: 130px; }
	.practice_note .note_list {display: flex; flex-wrap: wrap; gap: 20px; width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 20px; background: #FFF; }
	.practice_note .note_list > li:not(.empty_li) {width: calc((100% - 20px) / 2); margin: 0; border: 0; border-radius: 10px;
		-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
		-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
	}
	.practice_note .note_list li.empty_li {width: 100%; border: 0; }	

	
	
	/** main - contents - note view 공통 */
	/*.note_view_wrap .member_info .mb_img {width: 40px; height: 40px; }
	.note_view_wrap .member_info .mb_nick {font-size: 17px; }
	.note_view_wrap .follow_button_area button {width: 86px; font-size: 15px; }
	.note_view_wrap .follow_button_area button img {width: 10px;}

	.note_view_wrap .view_details .view_stat .category {width: 40px; font-size: 12px;}
	.note_view_wrap .view_details .view_song {padding-top: 20px; font-size: 18px; }
	.note_view_wrap .view_details .view_subject {padding: 20px 0; font-size: 17px; }
	.note_view_wrap .view_details .view_content {font-size: 15px; }
	.note_view_wrap .view_details .view_media {padding-top: 30px; }
	.note_view_wrap .view_details .created_at {margin-top: 20px; font-size: 15px; }

	.note_view_wrap .view_info {padding: 30px 20px; }
	.note_view_wrap .view_info > div > div img {height: 15px; }
	.note_view_wrap .view_info > div > div span {font-size: 16px; }
	.note_view_wrap .view_info .view_count img {width: 19px;}*/



	/** main - challenge */
	#main_challenge .swiper-slide .card_content .chall_count {font-size: 16px;}
	#main_challenge .swiper-slide .card_content .chall_ul > li .o_num {width: 32px; height: 32px; line-height: 32px; font-size: 15px; }
	#main_challenge .swiper-slide .card_content .chall_ul > li .song_info .comp {font-size: 16px; }
	#main_challenge .swiper-slide .card_content .chall_ul > li .song_info .title {font-size: 15px; }

	#main_challenge .challenge_video .chall_video_ul > li .cpl_wrap .mb_info .img {width: 40px; height: 40px; border-radius: 40px; }
	#main_challenge .challenge_video .chall_video_ul > li .cpl_wrap .mb_info .nick {font-size: 17px; }
	#main_challenge .challenge_video .chall_video_ul > li .cpl_wrap .created_at {font-size: 15px; }
	#main_challenge .challenge_video .chall_video_ul > li .item_top .title {font-size: 18px; }


	
	/** main - challenge - view */
	.chall_card_view_wrap .song_list {gap: 10px 40px; }
	.chall_card_view_wrap .song_list li {width: calc((100% - 40px) / 2);}
	
	.chall_card_view_wrap .success_card_wrap ul {gap: 10px 40px; }
	.chall_card_view_wrap .success_card_wrap ul li {width: calc((100% - 40px) / 2);}
	.chall_card_view_wrap .success_card_wrap ul li .member_info .left .mb_img {width: 40px; height: 40px;}
	.chall_card_view_wrap .success_card_wrap ul li .member_info .left .mb_nick {font-size: 17px; }
	.chall_card_view_wrap .success_card_wrap ul li .member_info .right {font-size: 15px; }
	.chall_card_view_wrap .success_card_wrap ul li .card_info .left > div img {height: 16px; }
	.chall_card_view_wrap .success_card_wrap ul li .card_info .left > div span {font-size: 16px; }
	.chall_card_view_wrap .success_card_wrap ul li .card_info .right > div img {height: 13px; }
	.chall_card_view_wrap .success_card_wrap ul li .card_info .right > div span {font-size: 16px; }



	/** main - community */
	.post_top .author_info .author_img {width: 40px;}
	.post_top .author_info .author_nick {font-size: 17px;}
	.post_top .created_at {font-size: 15px; }

	.post_mid {margin-top: 20px; }
	.post_mid .post_text .post_title .post_cat {padding: 5px; }
	.post_mid .post_text .subject {font-size: 16px; }
	.post_mid .post_text .post_content {font-size: 15px; }
	.post_mid .post_img {width: 74px; height: 74px; }

	.post_bot .post_info img {height: 16px; }
	.post_bot .post_info span {font-size: 16px; }
	.post_bot .view img {height: 13px; }
	.post_bot .view span {font-size: 16px; }
	
	

	/** main - community - view */
	.commu_view_wrap .view_top .mb_img {width: 40px; height: 40px; }
	.commu_view_wrap .view_top .mb_nick {font-size: 17px; }
	.commu_view_wrap .follow_button_area button {width: 86px; font-size: 15px; }
	.commu_view_wrap .follow_button_area button img {width: 10px;}

	.commu_view_wrap .view_details .view_stat .category {width: 40px; font-size: 12px;}
	.commu_view_wrap .view_details .view_song {padding-top: 20px; font-size: 18px; }
	.commu_view_wrap .view_details .view_subject {font-size: 17px; }
	.commu_view_wrap .view_details .view_content {font-size: 15px; }
	.commu_view_wrap .view_details .view_media {padding-top: 30px; }
	.commu_view_wrap .view_details .created_at {margin-top: 20px; font-size: 15px; }
	
	.commu_view_wrap .view_info {padding: 30px 20px; }
	.commu_view_wrap .view_info > div > div img {height: 16px; }
	.commu_view_wrap .view_info span {font-size: 16px; }
	.commu_view_wrap .view_info .view_count img {height: 13px;}



	/** follow */
	.follow_list .list_wrap ul li .right button.follow_modal_button img {max-width: 18px; height: 18px; object-fit: contain}
	.follow_list .list_wrap ul li .right button.border_button img {max-width: 10px; }
	.follow_list .list_wrap ul li .right .request_follow span {font-size: 15px; }



	/** follow - challenge */
	.follow_chview_wrap .info_wrap .member_info .mb_img {width: 40px; height: 40px; border-radius: 40px;}
	.follow_chview_wrap .info_wrap .member_info .mb_nick {font-size: 17px; }
	.follow_chview_wrap .info_wrap .created_at {font-size: 15px; }
	.follow_chview_wrap .view_top .card_title {padding-bottom: 15px; font-size: 18px; }



	/** reply common */
	.reply_write .reply_input input {height: 48px; }
	.reply_write .reply_input button img {width: 28px; height: 28px; }


}

@media screen and (min-width: 1000px){
	
}



@media screen and (min-width: 1025px){
	.is_web .container {overflow: initial;}
	
	/** float banner */
	.store_banner {break-inside: avoid; justify-content: initial; align-items: initial; position: sticky; top: 0; left: 100%; width: 1px; height: 1px; margin: -1px; z-index: 130;}
	.store_banner.hide {display: flex;}
	.store_banner .store_bn_back {display: none; }
	.store_banner .store_bn_box {width: auto; max-width: none; }
	.store_banner .store_bn_box .mob_box {display: none; }
	.store_banner .store_bn_box .pc_box {display: block; padding: 30px 20px; width: max-content;}
	.store_banner .store_bn_box .pc_box .img_wrap {width: 82px; margin: 0 auto; text-align: center; mix-blend-mode: difference;}
	.store_banner .store_bn_box .pc_box .img_wrap img {max-width: 100%; height: auto; object-fit: contain;}
	.store_banner .store_bn_box .pc_box .desc {margin-top: 12px; line-height: 19px; text-align: center; font-size: 13px; font-weight: 500; }
	.store_banner .store_bn_box .pc_box .qr_group .qr_wrap {margin-top: 25px; }
	.store_banner .store_bn_box .pc_box .qr_group button {display: block; width: 78px; height: 78px; margin: 0 auto; font-size: 0;}
	.store_banner .store_bn_box .pc_box .qr_group span {display: block; margin-top: 7px; line-height: 22px; text-align: center; color: #888; font-size: 14px; font-weight: 600; }

	.main_wrap.index .store_banner .store_bn_box {padding-top: 15px; }
}


@media screen and (orientation: landscape){
	.login_wrap {overflow: auto; }
}