/** bottomsheet */ #bottomsheet {position: fixed; top: 100%; left: 0; width: 100%; height: 100%; z-index: 200; } /* #bottomsheet:not(.active) {transition: all 0.2s linear;} */ #bottomsheet .sheet_back {position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #bottomsheet .sheet_modal { display: flex; flex-direction: column; position: absolute; top: 15px; left: 50%; transform: translateX(calc((-100% - 1px) / 2)); width: 100%; max-width: 800px; height: calc(100% - 15px); border-radius: 20px 20px 0 0; background: var(--sheet-background); -webkit-box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.16); box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.16); } #bottomsheet .sheet_header {display: flex; justify-content: space-between; align-items: center; position: relative; padding: 20px 20px; } #bottomsheet .sheet_header .pan_button {position: absolute; top: 8px; left: 50%; transform: translateX(-25px); width: 50px; height: 4px; border-radius: 4px; background: var(--sheet-main-color); opacity: 0.2; } #bottomsheet .sheet_header .member_info {display: flex; align-items: center; gap: 8px; } #bottomsheet .sheet_header .member_info .mb_img {display: none; width: 32px; height: 32px; border-radius: 32px; background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA; overflow: hidden; font-size: 0;} #bottomsheet .sheet_header .member_info .mb_img img {width: 100%; height: 100%; object-fit: cover;} #bottomsheet .sheet_header .member_info .mb_nick {color: var(--sheet-main-color); font-size: 15px; font-weight: bold;} #bottomsheet .sheet_header .member_info .mb_membership {display: flex; align-items: center; padding: 4px 8px; border-radius: 13px; background: var(--sheet-sub-color); color: var(--pro-color); font-size: 12px; font-weight: bold; } #bottomsheet .sheet_header .today_prac_stat {display: flex; align-items: center; gap: 8px; } #bottomsheet .sheet_header .today_prac_stat .cat_color {width: 12px; height: 12px; border-radius: 12px; } #bottomsheet .sheet_header .today_prac_stat .cat_title {line-height: 1.2em; color: var(--sheet-main-color); font-size: 13px;} #bottomsheet .sheet_header .membership_area {display: none; align-items: center; height: 32px; padding: 0 15px; border-radius: 32px; background: #FFF; } #bottomsheet .sheet_header .membership_area .pro_member {display: flex; align-items: center; gap: 7px;} #bottomsheet .sheet_header .membership_area .pro_member > div {display: flex; justify-content: center; align-items: center; gap: 5px;} #bottomsheet .sheet_header .membership_area .rest_img {width: 100%; font-size: 0;} /* #bottomsheet .sheet_header .membership_area .rest_img img {filter: var(--filter);} */ #bottomsheet .sheet_header .membership_area .rest_img svg {fill: var(--note-color);} #bottomsheet .sheet_header .membership_area .whole_group .rest_img {max-width: 26px;} #bottomsheet .sheet_header .membership_area .eighth_group .rest_img {max-width: 9px;} #bottomsheet .sheet_header .membership_area span {color: var(--note-color); font-size: 13px; font-weight: bold; } #bottomsheet .sheet_container {flex: 1; padding-bottom: 50px; overflow-y: auto; } #bottomsheet .sheet_container .dajim_area {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; position: relative; margin: 0 20px; min-height: 140px; } #bottomsheet .sheet_container .dajim_area .dajim_bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 0; } #bottomsheet .sheet_container .dajim_area .dajim_text {display: flex; justify-content: center; align-items: center; position: relative; line-height: 1.2em; text-align: center; } #bottomsheet .sheet_container .dajim_area .dajim_text p {position: relative; line-height: 1.25em; color: var(--dajim-color); font-family: 'KNPSKkomi-Regular00', sans-serif; font-size: 24px; } #bottomsheet:not(.theme_basic) .sheet_container .dajim_area .dajim_text p {margin-top: 14px; } #bottomsheet.active .sheet_container {overflow: hidden; } #bottomsheet .sheet_container .sheet_content {margin: 50px 0; } #bottomsheet .sheet_container .sheet_content .cont_title {display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 10; margin-bottom: 15px; padding: 0 20px; } .bg_wait {background: #FF7E7E;} .bg_doing {background: #F5D835;} .bg_done {background: #8DD940;} #bottomsheet .sheet_container .sheet_content .cont_title h3 {color: var(--sheet-main-color); font-size: 17px; } #bottomsheet .sheet_container .sheet_content .cont_title button {color: var(--sheet-sub-color); font-size: 14px; font-weight: 500;} #bottomsheet .sheet_container .sheet_content .cont_title .sel_label {color: var(--sheet-main-color);} #bottomsheet .sheet_container .sheet_content .cont_title .arrow svg {stroke: var(--sheet-main-color);} #bottomsheet .sheet_container .prac_content .cont_con {padding: 0 20px; } #bottomsheet .sheet_container .prac_content .content {padding: 20px; border-radius: 10px; background: #FFF; } #bottomsheet .sheet_container .prac_content .today_at {padding: 10px 0; font-size: 15px; font-weight: bold; } #bottomsheet .sheet_container .prac_content .prac_list_ul {padding: 15px 0; } #bottomsheet .sheet_container .prac_content .prac_list_ul li {position: relative; display: flex; align-items: center; flex-wrap: wrap; padding: 10px 0; } #bottomsheet .sheet_container .prac_content .prac_list_ul li .cat_color {width: 7px; height: 20px; border-radius: 4px; } #bottomsheet .sheet_container .prac_content .prac_list_ul li > h4 {padding: 0 7px 0 15px; font-size: 16px;} #bottomsheet .sheet_container .prac_content .prac_list_ul li > div {color: #747474; font-size: 13px; font-weight: 500; word-break: keep-all;} #bottomsheet .sheet_container .prac_content .prac_list_ul li > .time {display: none; margin-left: 12px; padding: 2px 8px; border-radius: 4px; background: #F6F7F8; color: #747474; font-size: 12px; font-weight: 500; word-break: keep-all; } #bottomsheet .sheet_container .prac_content .prac_list_ul li > button {position: absolute; top: 50%; right: -10px; transform: translate(0, -50%); padding: 10px; font-size: 0; } #bottomsheet .sheet_container .prac_content .prac_list_ul li > button img {width: 14px;} #bottomsheet .sheet_container .prac_content .prac_list_ul li.wait_li .cat_color {background: #FF7E7E; } #bottomsheet .sheet_container .prac_content .prac_list_ul li.doing_li .cat_color {background: #F5D835; } #bottomsheet .sheet_container .prac_content .prac_list_ul li.done_li .cat_color {background: #8DD940; } #bottomsheet .sheet_container .prac_content .prac_stat {display: flex; align-items: center; padding: 25px 0; } #bottomsheet .sheet_container .prac_content .prac_stat .cat_color {width: 7px; height: 20px; border-radius: 4px; } #bottomsheet .sheet_container .prac_content .prac_stat h4 {padding: 0 7px 0 15px; } #bottomsheet .sheet_container .prac_content .prac_stat p {color: #747474; font-size: 13px; font-weight: 500;} #bottomsheet .sheet_container .swiper-pagination {display: flex; justify-content: center; gap: 4px; position: static; font-size: 0; } #bottomsheet .sheet_container .swiper-pagination .swiper-pagination-bullet {width: 5px; height: 5px; margin: 0; border-radius: 5px; } #bottomsheet .sheet_container .swiper-pagination .swiper-pagination-bullet-active {width: 18px; background: #000;} #bottomsheet .legend {position: absolute; right: 0; bottom: 0;} #bottomsheet .legend .attendance {display: flex; align-items: center; gap: 5px} #bottomsheet .legend .attendance dt {width: 6px; height: 6px; border-radius: 6px; background: #8DD940; } #bottomsheet .legend .attendance dd {font-size: 12px; font-weight: 500;} .cal_navigation {padding: 10px 0 0; } .cal_navigation .wrap {display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .cal_navigation .wrap .right {position: absolute; right: 0; } .cal_navigation .date_box {display: flex; align-items: center; position: relative; } .cal_navigation .nav_date {order: 2; min-width: 124px; padding: 0 20px; text-align: center; font-size: 18px; font-weight: bold; } .cal_navigation button {width: 20px; height: 20px; padding: 0 5px; font-size: 0; /* mix-blend-mode: difference; */} .cal_navigation button:disabled {opacity: 0.2; } .cal_navigation button.nav_prev {order: 1; background: url('/include/images/sheet_nav_prev2.png') no-repeat center / 7px 12px;} .cal_navigation button.nav_next {order: 3; background: url('/include/images/sheet_nav_next2.png') no-repeat center / 7px 12px;} .cal_navigation .goal_text {margin-top: 5px; text-align: center; color: #747474; font-size: 14px; font-weight: 500;} #bottomsheet .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: 17px 16px; } /** main - 오늘의 연습 */ #bottomsheet #today_board .top {position: relative; background: url('/include/images/sheet_more_arrow.png') no-repeat right 0 center / 7px auto;} #bottomsheet #today_board .button_group {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 10px 0 0; } #bottomsheet #today_board .button_group .button_wrap {display: flex; flex-direction: column; gap: 10px;} #bottomsheet #today_board .button_group .button_wrap button {display: block; width: 48px; height: 48px; } #bottomsheet #today_board .button_group .button_wrap.start button {background: url('/include/images/sheet_start_button.png') no-repeat center / contain;} #bottomsheet #today_board .button_group .button_wrap.stop button {background: url('/include/images/sheet_stop_button.png') no-repeat center / contain;} #bottomsheet #today_board .button_group .button_wrap.note button {background: url('/include/images/sheet_note_button.png') no-repeat center / contain;} #bottomsheet #today_board .button_group .button_wrap.metronome button {background: url('/include/images/sheet_metronome_button.png') no-repeat center / contain;} #bottomsheet #today_board .button_group .button_wrap.share button {background: url('/include/images/sheet_share_button.png') no-repeat center / contain;} #bottomsheet #today_board .button_group .button_wrap.attendance button {background: url('/include/images/sheet_att_off.png') no-repeat top 21px center / 24px auto, url('/include/images/sheet_att_off_bg.png') no-repeat center / contain;} #bottomsheet #today_board .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;} #bottomsheet #today_board .button_group .button_wrap span {width: 100%; text-align: center; font-size: 13px; font-weight: 500;} #bottomsheet #prac_board {padding-top: 20px; } #bottomsheet #prac_board .top {display: flex; align-items: center; position: relative; } #bottomsheet #prac_board .top .more {position: absolute; right: 10px; background: #000; } #bottomsheet #prac_board .swiper_wrap {margin-left: -20px; margin-right: -20px; } #bottomsheet #prac_board .swiper-wrapper {padding: 20px 0; } #bottomsheet #prac_board .swiper-slide { width: calc((100% - 40px)); padding: 20px; border-radius: 12px; 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); } #bottomsheet #prac_board .swiper-slide .top {display: flex; align-items: center; gap: 5px; padding-bottom: 20px; } #bottomsheet #prac_board .swiper-slide .score_icon {margin-left: -5px; font-size: 0;} #bottomsheet #prac_board .swiper-slide .score_icon img {width: 30px; height: auto; object-fit: contain; } #bottomsheet #prac_board .swiper-slide .title {flex: 1; padding-right: 20px; background: url('/include/images/sheet_more_arrow.png') no-repeat right 0 center/ auto 16px;} #bottomsheet #prac_board .swiper-slide .composer {margin-bottom: 4px; color: #888; font-size: 14px; font-weight: 500; } #bottomsheet #prac_board .swiper-slide .song_title { display: flex; align-items: center; gap: 10px; position: relative; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #bottomsheet #prac_board .swiper-slide .button_group {display: flex; align-items: center; gap: 10px; } #bottomsheet #prac_board .swiper-slide .button_group button {flex: 1; height: 38px; border-radius: 6px; background: #F1F2F4; color: #4D5363; font-size: 14px; font-weight: 500; } #bottomsheet #prac_board .swiper-slide .progress_check {display: flex; flex-direction: column; gap: 8px; padding: 25px 0 20px; } #bottomsheet #prac_board .swiper-slide .progress_check > div {width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; } #bottomsheet #prac_board .swiper-slide .progress_check button { display: flex; justify-content: center; align-items: center; position: relative; width: calc((100% - 30px) / 6); max-width: 60px; border-radius: 100%; border: 1px solid #000; } #bottomsheet #prac_board .swiper-slide .progress_check input[type="button"] {position: relative; width: calc((100% - 30px) / 6); max-width: 60px; border-radius: 100%; border: 1px solid #000; } #bottomsheet #prac_board .swiper-slide .progress_check .start {order: -1; background: url('/include/images/prac_start_on.png') no-repeat center/ contain;} #bottomsheet #prac_board .swiper-slide .progress_check .start span {font-size: 11px; font-weight: 500; } #bottomsheet #prac_board .swiper-slide .progress_check .stop {order: 10; background: url('/include/images/prac_stop_on.png') no-repeat center/ contain;} #bottomsheet #prac_board .swiper-slide .progress_check .stop:disabled {background: url('/include/images/prac_stop_off.png') no-repeat center/ contain;} #bottomsheet #prac_board .swiper-slide .progress_check button:before {display: block; clear: both; content: ''; padding-bottom: 100%;} #bottomsheet #prac_board .swiper-slide .progress_check button span {position: absolute; font-size: 14px; font-weight: 500;} #bottomsheet #prac_board .swiper-slide .progress_check button:disabled {border-color: #D0D0D0; } #bottomsheet #prac_board .swiper-slide .progress_check button:disabled span {color: #D0D0D0; } #bottomsheet #prac_board .swiper-pagination {padding: 10px 0; } #bottomsheet #prac_board .swiper-pagination .swiper-pagination-bullet {width: 5px; height: 5px; margin: 0; border-radius: 5px; } #bottomsheet #prac_board .swiper-pagination .swiper-pagination-bullet-active {width: 20px; background: #C5211F;} #bottomsheet #today_prac .total_time {display: flex; justify-content: flex-end; align-items: center; gap: 3px; } #bottomsheet #today_prac .total_time i {width: 18px; height: 18px; background: url('/include/images/timer_icon.png') no-repeat center / contain; } #bottomsheet #today_prac .total_time span {color: #888; font-size: 12px; font-weight: 500;} #bottomsheet #today_board .total_time {padding-bottom: 20px; border-bottom: 1px solid #EDEDED; } /** main - 챌린지 */ #bottomsheet #chall_card {display: none; } #bottomsheet #chall_card .cont_con {padding: 20px 0 0; } #bottomsheet #chall_card .bs_chall_swiper .swiper-wrapper {align-items: stretch; } #bottomsheet #chall_card .bs_chall_swiper .swiper-slide {display: flex; flex-direction: column; min-width: 260px; width: 50%; height: auto; } #bottomsheet #chall_card .bs_chall_swiper .swiper-slide .ch_img {position: relative; width: 100%; border-radius: 20px 20px 0 0; background: url('/include/images/no_img_bg.png') no-repeat center/contain, #F5F7FA; overflow: hidden;} #bottomsheet #chall_card .bs_chall_swiper .swiper-slide .ch_img:before {display: block; clear: both; content: ''; position: relative; padding-bottom: calc((224 / 340) * 100%); background: rgba(0,0,0,0.5); z-index: 2; } #bottomsheet #chall_card .bs_chall_swiper .swiper-slide .ch_img img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } #bottomsheet #chall_card .bs_chall_swiper .swiper-slide .ch_img span { display: block; position: absolute; top: 20px; left: 20px; padding: 5px 15px; border-radius: 13px; background: #C5211F; text-align: center; color: #FFF; font-size: 12px; font-weight: bold; } #bottomsheet #chall_card .bs_chall_swiper .swiper-slide .ch_img .ch_period {position: absolute; bottom: 20px; right: 20px; color: #FFF; font-size: 12px; z-index: 3; } #bottomsheet #chall_card .bs_chall_swiper .swiper-slide .songlist { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 30px; border: 1px solid #E0E0E3; border-top: 0; border-radius: 0 0 20px 20px; background: #FFF; } #bottomsheet #chall_card .bs_chall_swiper .swiper-slide .songlist li {display: flex; align-items: center; gap: 12px; padding: 9px 20px; border-radius: 20px; background: #FAFAFA; } #bottomsheet #chall_card .bs_chall_swiper .swiper-slide .songlist li .num {width: 25px; line-height: 25px; border-radius: 25px; background: #D8D8D8; text-align: center; color: #FFF; font-size: 13px; } #bottomsheet #chall_card .bs_chall_swiper .swiper-slide .songlist li .song_info .composer {line-height: 1.3em; font-size: 14px; font-weight: 500;} #bottomsheet #chall_card .bs_chall_swiper .swiper-slide .songlist li .song_info .title {line-height: 1.3em; color: #747474; font-size: 13px; } #bottomsheet #chall_card .bs_chall_swiper .swiper-slide .songlist li:nth-child(even) .num {background: #2D2F38; } #bottomsheet #chall_card .bs_chall_swiper .swiper-slide.empty_slide {text-align: center; color: var(--sheet-sub-color);font-size: 14px;} #bottomsheet #chall_card .no_membership .empty_text {position: static; text-align: center; font-size: 16px; font-weight: 500;} #bottomsheet #chall_card .no_membership button {color: #FFF; font-size: 16px; font-weight: bold; } /** main - 연습달력 */ #bottomsheet #prac_calendar .cont_box {position: relative; border-radius: 12px; background: #FFF;} #bottomsheet #prac_calendar .cont_box .group {position: relative; padding: 20px; } #bottomsheet #prac_calendar .cont_box .goal_text {margin-top: 5px; text-align: center; color: #747474; font-size: 14px; font-weight: 500;} #bottomsheet #prac_calendar .cont_box .button_area {margin-top: 10px; } #bottomsheet #prac_calendar .cont_box .button_area button {display: block; width: 100%; height: 42px; border-radius: 42px; background: #C5211F; color: #FFF; font-size: 15px; font-weight: bold; } #bottomsheet #prac_calendar .cont_box .button_area button:disabled {background: #DDD; } #bottomsheet #prac_calendar .cont_box .sch_result {} #bottomsheet #prac_calendar .cont_box .sch_result .result_box {padding: 20px; border-top: 8px solid #F3F5F8; } #bottomsheet #prac_calendar .cont_box .sch_result .result_box .top {display: flex; align-items: baseline; gap: 8px; color: var(--note-color); font-size: 17px; } #bottomsheet #prac_calendar .cont_box .sch_result .result_box .top span {color: var(--sheet-sub-color); font-size: 14px; font-weight: 500;} #bottomsheet #prac_calendar .cont_box .sch_result .result_box .go_today_detail {padding: 20px 0; border-bottom: 1px solid #53586F; background: url('/include/images/right_link_icon.png') no-repeat right center/ 8px 15px;} #bottomsheet #prac_calendar .cont_box .sch_result .result_box .res_ul {} #bottomsheet #prac_calendar .cont_box .sch_result .result_box .res_ul li {padding: 20px 0; border-top: 1px solid #E9EAF0; } #bottomsheet #prac_calendar .cont_box .sch_result .result_box .res_ul li:first-child {border-top: 0; } #bottomsheet #prac_calendar .cont_box .sch_result .result_box .res_ul li .category {color: #747474; font-size: 13px;} #bottomsheet #prac_calendar .cont_box .sch_result .result_box .res_ul li h5 {margin-bottom: 10px; padding: 10px 0; background: url('/include/images/right_link_icon.png') no-repeat right center/ 8px 15px; font-size: 16px;} #bottomsheet #prac_calendar .cont_box .sch_result .result_box .res_ul li dl {display: flex; justify-content: start; gap: 30px; padding-top: 15px;} #bottomsheet #prac_calendar .cont_box .sch_result .result_box .res_ul li dl:first-of-type {padding-top: 0; } #bottomsheet #prac_calendar .cont_box .sch_result .result_box .res_ul li dt {width: 52px; font-size: 15px; font-weight: bold;} #bottomsheet #prac_calendar .cont_box .sch_result .result_box .res_ul li dd {flex: 1; font-size: 15px; } #bottomsheet #prac_calendar .cont_box .sch_result .result_box .res_ul li.empty_li {display: flex; justify-content: center; align-items: center; padding: 60px 0; font-size: 15px; font-weight: 500;} #bottomsheet #prac_calendar .cont_box .sch_result .close_area button {display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; margin-top: -20px; padding: 20px; font-size: 0; vertical-align: middle;} #bottomsheet #prac_calendar .cont_box .sch_result .close_area button span {color: #747474; font-size: 14px; font-weight: 500;} #bottomsheet #prac_calendar .cont_box .sch_result .close_area button img {width: 15px;} /** main - 연습시간 */ #bottomsheet #prac_time .cont_box {padding: 20px; border-radius: 12px; background: #FFF; } #bottomsheet #prac_time .cont_box dl {display: flex; justify-content: space-between; align-items: center; margin: 20px 0 0; } #bottomsheet #prac_time .cont_box dt {font-size: 16px; font-weight: bold; } #bottomsheet #prac_time .cont_box dd {font-size: 16px; font-weight: bold; } #bottomsheet #prac_time #time_month dl {margin: 10px 0 0; } #bottomsheet #prac_time #time_month dd {color: var(--dajim-color); color: #C5211F; } #bottomsheet #prac_time #time_month .progress_wrap {position: relative; height: 16px; margin: 15px 0 9px; border-radius: 8px; background: rgba(193,33,31,0.07)} #bottomsheet #prac_time #time_month .progress_wrap .fill {display: flex; justify-content: center; align-items: center; position: relative; width: 0; height: 100%; border-radius: 8px; background: #C5211F; } #bottomsheet #prac_time #time_month .progress_wrap .fill span {position: absolute; top: 50%; left: calc(100% + 10px); transform: translateY(-50%); font-size: 13px; font-weight: bold; } #bottomsheet #prac_time #time_month .progress_wrap.fill_bar .fill span {position: static} #bottomsheet #prac_time #time_month .goal_time {text-align: right; color: #888; font-size: 13px; font-weight: 500;} #bottomsheet #prac_time #time_year dt {font-weight: 600; } #bottomsheet #prac_time #time_year dd {font-weight: 600; } #bottomsheet #prac_time .prac_time_standard {margin-top: 10px; text-align: right; color: var(--sheet-main-color); font-size: 12px; } #bottomsheet #prac_time_year .cont_box {padding: 20px; border-radius: 12px; background: #FFF; } #bottomsheet #prac_time_year .cont_box > span {font-size: 16px; font-weight: bold; } #bottomsheet #success_year .list_ul {padding: 0 20px; border-radius: 12px; background: #FFF; } #bottomsheet #success_year .list_ul li {display: flex; justify-content: center; align-items: center; gap: 10px; padding: 20px 0; border-top: 1px solid #E9EAF0; } #bottomsheet #success_year .list_ul li:nth-child {border-top: 0; } #bottomsheet #success_year .list_ul li .info {flex: 1; font-size: 0;} #bottomsheet #success_year .list_ul li .info .title {font-size: 16px; font-weight: bold; } #bottomsheet #success_year .list_ul li .info .created_at {line-height: 1.5em; margin-top: 3px; color: #747474; font-size: 13px;} #bottomsheet #success_year .list_ul li .arrow img {width: 9px;} #bottomsheet #success_year .list_ul li.empty_li {display: flex; justify-content: center; align-items: center; padding: 40px 0; text-align: center; font-size: 15px; font-weight: 500;} /** main - 연습통계 */ #bottomsheet .sort_select_wrap {} #bottomsheet .sort_select_wrap .sel_label {width: 100%; padding: 0; border: 0; background: none; text-align: left; color: #B4B4B4; outline: none; } #bottomsheet .sort_select_wrap .arrow {width: 11px; height: auto; background-image: none; font-size: 0; } #bottomsheet .sort_select_wrap .active ~ .arrow {transform: translate(0, -50%) rotate(180deg); } #bottomsheet .sort_select_wrap .arrow svg {fill: none; stroke: #BDBDBD; } #bottomsheet .sort_select_wrap ul {margin-top: 5px; background: #FFF; z-index: 100;} #bottomsheet .sort_select_wrap ul li {font-size: 14px; } #bottomsheet #prac_time_stats .cont_box {padding: 20px; border-radius: 12px; background: #FFF; } #bottomsheet #prac_time_stats .chart_wrap {position: relative; width: 100%; margin-top: 20px; max-height: 300px;} #bottomsheet #prac_time_stats .chart_wrap:before {display: block; clear: both; content: ''; padding-bottom: 50%; overflow: hidden; } #bottomsheet #prac_time_stats .chart_wrap #prac_chart {position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; max-height: 300px;} #bottomsheet #prac_time_stats .chart_legend {display: flex; flex-direction: column; align-items: flex-end; margin-top: 15px; } #bottomsheet #prac_time_stats .chart_legend h6 {color: #747474; text-align: center; font-size: 14px; font-weight: 500;} #bottomsheet #prac_time_stats .chart_legend > div {display: flex; flex-direction: column; gap: 10px; } #bottomsheet #prac_time_stats .chart_legend > div dl {display: flex; align-items: center; gap: 8px; } #bottomsheet #prac_time_stats .chart_legend > div dt:after {display: block; clear: both; content: ''; width: 16px; height: 12px; border-radius: 2px; } #bottomsheet #prac_time_stats .chart_legend > div dd {position: relative; color: #747474; font-size: 14px; font-weight: 500;} #bottomsheet #prac_time_stats .chart_legend > div dl.user_legend dt:after {background: #D6D6D6; } #bottomsheet #prac_time_stats .chart_legend > div dl.mine_legend dt:after {background: #C5211F; } #bottomsheet #prac_time_stats .chart_legend > div dl.mine_legend dd {color: #C5211F; } #bottomsheet.subpage .sheet_modal {background: linear-gradient(180deg, var(--sheet-background) 0%, #FFFFFF 110px);} /** theme - main */ #bottomsheet.theme_basic .sheet_container .dajim_area .dajim_bg {background: url('/include/images/theme/theme_basic.png') no-repeat center / 100% 100%;} #bottomsheet.theme_basic .sheet_container .dajim_area .dajim_text p {line-height: normal; font-family: 'WandohopeR', sans-serif; font-size: 20px; letter-spacing: -0.04em; } #bottomsheet.theme_1 .sheet_container .dajim_area {min-height: auto; height: 88px; } #bottomsheet.theme_1 .sheet_container .dajim_area .dajim_bg {top: 50%; transform: translate(0, -50%); height: 100%; font-size: 0; } #bottomsheet.theme_1 .sheet_container .dajim_area .dajim_bg .theme_1_wrap {height: 100%; } #bottomsheet.theme_1 .sheet_container .dajim_area .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; } #bottomsheet.theme_1 .sheet_container .dajim_area .dajim_bg .theme_1_wrap .line_wrap span {height: 2px; background: var(--sheet-main-color); opacity: 0.07} #bottomsheet.theme_1 .sheet_container .dajim_area .dajim_bg .theme_1_wrap svg { width: auto; height: auto; max-width: 100%; max-height: 100%; fill: var(--sheet-main-color); } #bottomsheet.theme_2 .sheet_container .dajim_area .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%; } #bottomsheet.theme_3 .sheet_container .dajim_area .dajim_bg { margin: 0 -20px; width: calc(100% + 40px); background: url('/include/images/theme/theme_3_img_1.png') no-repeat center / 100% 100%; } #bottomsheet.theme_3 .sheet_container .dajim_area .dajim_text { /* position: absolute; bottom: 5px; left: 0; */ width: 80%; min-width: 300px; padding: 20px; border-radius: 5px; background: rgba(255,255,255,0.95); } #bottomsheet.theme_3 .sheet_container .dajim_area .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); } #bottomsheet .empty_text {color: var(--sheet-main-color);} /** bottomsheet - on */ /* #bottomsheet.on {top: 0; } */ #bottomsheet.on .sheet_header .member_info .mb_img {display: block;} #bottomsheet.on .sheet_header .member_info .mb_membership {padding: 0; background: none; color: var(--sheet-sub-color);} #bottomsheet.on .sheet_header .today_prac_stat {display: none;} #bottomsheet.on .sheet_header .membership_area {display: flex; } /* * subpage */ #bottomsheet .sort_area {display: flex; align-items: center; gap: 24px; } #bottomsheet .sort_area .sort_left {order: 2;} #bottomsheet .sort_area .sort_select_wrap {order: 1; position: relative;} #bottomsheet .sort_area .select_box_wrap .sel_label {font-size: 15px; font-weight: 500;} #bottomsheet .sort_area .select_box_wrap ul {left: 0; right: auto; font-size: 14px; font-weight: 500;} .sheet_sub_page {flex: 1; display: flex; flex-direction: column; overflow: hidden; } .sheet_sub_page .sub_header {padding-top: 40px;} .sheet_sub_page .sub_header .nav_inner {position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .sheet_sub_page .sub_header .right_button {position: absolute; right: -10px; padding: 10px;} .sheet_sub_page .sub_header .right_button.note_edit {font-size: 0; } .sheet_sub_page .sub_header .right_button.note_edit img {width: 13px; object-fit: cover;} .sheet_sub_page .sub_page_content {flex: 1; overflow: auto; } .sheet_sub_page h2 {font-size: 18px; } .sheet_sub_page .submit_button {max-width: 350px; margin: 0 auto;} .sheet_close {position: absolute; top: 50%; left: -10px; padding: 10px; transform: translateY(-50%); font-size: 0; z-index: 102;} .sheet_close img {width: 15px; object-fit: contain;} /** 한줄 캘린더 */ #bottomsheet .strap_calendar {padding-bottom: 15px; border-bottom: 1px solid #EDEDED} #bottomsheet .strap_calendar .cal_navigation {padding: 20px 0; } #bottomsheet .strap_calendar .cal_navigation .open_calendar {display: flex; align-items: center; gap: 10px; width: auto; height: auto;} #bottomsheet .strap_calendar .cal_navigation .open_calendar:before {display: block; clear: both; content: ''; width: 15px; height: 16px; background: url('/include/images/calendar_icon2.png') no-repeat center / contain; } #bottomsheet .strap_calendar .cal_navigation .open_calendar:after {display: block; clear: both; content: ''; width: 10px; height: 6px; background: url('/include/images/calendar_down_arrow.png') no-repeat center /contain;} #bottomsheet .strap_calendar .cal_navigation .goal_text {text-align: center; color: #888; font-size: 13px; } #bottomsheet .strap_calendar .calendar_swiper .date_wrap {/* display: flex; */flex-direction: column; justify-content: center; align-items: center; text-align: center; width: 100%; max-width: 60px; margin: 0 auto; } #bottomsheet .strap_calendar .calendar_swiper .holiday {color: #EF4646; } #bottomsheet .strap_calendar .calendar_swiper .week_days {line-height: 18px; font-size: 15px; } #bottomsheet .strap_calendar .calendar_swiper .week_date {width: 100%; max-width: 40px; padding: 2px 4px; line-height: 18px; margin: 10px auto 0; border-radius: 22px; text-align: center; font-size: 15px; font-weight: bold; } #bottomsheet .strap_calendar .calendar_swiper .week_attendance {width: 6px; height: 6px; margin: 4px auto; border-radius: 6px; } #bottomsheet .strap_calendar .calendar_swiper .week_attendance.checked {background: #8DD940; } #bottomsheet .strap_calendar .calendar_swiper .week_prac_time {line-height: 16px; margin-top: 3px; color: #666; font-size: 13px; font-weight: bold; } #bottomsheet .strap_calendar .calendar_swiper .week_prac_time.attain {color: #EF4646; } #bottomsheet .strap_calendar .calendar_swiper .week_prac_cnt {line-height: 16px; margin-top: 4px; color: #666; font-size: 13px; font-weight: bold; } #bottomsheet .strap_calendar .calendar_swiper .date_wrap.active .week_date {background: #EDEDED; } /** 노트 공통 */ #bottomsheet .sch_sort_wrap {margin-top: 0; } #bottomsheet .sch_sort_wrap .sort_category_wrap {padding-bottom: 10px; } #bottomsheet .sch_sort_wrap .sort_category_wrap .radio_label div {padding: 0 10px; } #bottomsheet .sch_sort_wrap .sort_category_wrap .radio_label div span {font-size: 14px; } #bottomsheet .note_list_ul li {padding: 20px; border-bottom: 1px solid #EDEDED; } #bottomsheet .note_list_ul li .item_top {display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 10px; } #bottomsheet .note_list_ul li .item_top .category {line-height: 20px; padding: 0 7px; border-radius: 5px; color: #FFF; font-size: 12px; font-weight: 600;} #bottomsheet .note_list_ul li .item_top .cate_plan {background: #FFC000; } #bottomsheet .note_list_ul li .item_top .cate_prac {background: #66BD2B; } #bottomsheet .note_list_ul li .item_top .cate_lesson {background: #7E42E0; } #bottomsheet .note_list_ul li .item_top .cate_feedback {background: #2E75B6; } #bottomsheet .note_list_ul li .item_top .subj_wrap {flex: 1; } #bottomsheet .note_list_ul li .item_top .subject {line-height: normal; font-size: 16px; font-weight: 600; -webkit-line-clamp: 1; } #bottomsheet .note_list_ul li .item_top .created_at {margin-top: 2px; color: #C4C4C4; font-size: 11px; } #bottomsheet .note_list_ul li .item_top .icon_group {display: flex; align-items: center; gap: 12px;} #bottomsheet .note_list_ul li .item_top .icon_group img {width: auto; height: 12px; object-fit: cover; } #bottomsheet .note_list_ul li .item_mid {line-height: 1.2em; margin: 10px 0; color: #3D3D3D; font-size: 14px; } #bottomsheet .note_list_ul li .item_bot {display: flex; justify-content: space-between; align-items: center; gap: 10px; } #bottomsheet .note_list_ul li .item_bot > div {display: flex; align-items: center; gap: 15px; } #bottomsheet .note_list_ul li .item_bot dl {display: flex; align-items: center; gap: 6px;} #bottomsheet .note_list_ul li .item_bot dt {font-size: 0; } #bottomsheet .note_list_ul li .item_bot dt img {width: auto; height: 12px; object-fit: cover; } #bottomsheet .note_list_ul li .item_bot dd {color: #888; font-size: 12px;} #bottomsheet .note_list_ul li .item_bot .allow {color: #888; font-size: 11px; font-weight: 500;} #bottomsheet .note_list_ul li .item_bot .allow.teacher {color: #2E75B6; } #bottomsheet .note_list_ul li.empty_li {padding: 40px 0; justify-content: center; align-items: center; border: 0; text-align: center; font-size: 15px; font-weight: 500; } /** quiz */ #sub_quiz_view .go_back_button {left: auto; right: 10px;} #sub_quiz_view .go_back_button img {width: 14px; height: 14px; } #sub_quiz_view .image_wrap img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;} /** 연습곡 - list */ #sub_prac_songs {} #sub_prac_songs #f_subpage_sch {padding-top: 10px; } #sub_prac_songs #f_subpage_sch .sort_area {padding-top: 15px; } #sub_prac_songs #f_subpage_sch .chk_wrap span {color: #000; } #sub_prac_songs .empty_li {display: flex; justify-content: center; align-items: center; padding: 60px 0; text-align: center; font-size: 15px; font-weight: 500;} #sub_prac_songs .prac_songs_ul li {padding: 20px; border-bottom: 1px solid #EDEDED; } #sub_prac_songs .prac_songs_ul li.empty_li {border-bottom: 0; } #sub_prac_songs .prac_songs_ul li .top {display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } #sub_prac_songs .prac_songs_ul li .top .status_wrap {display: flex; align-items: center; gap: 6px; } #sub_prac_songs .prac_songs_ul li .top .status {line-height: 14px; padding: 3px 7px; border-radius: 5px; background: #F5F7FA; text-align: center; color: #6F7381; font-size: 12px; font-weight: bold;} #sub_prac_songs .prac_songs_ul li .top .status.ing {background: #FDE8E8; color: #EF4646;} #sub_prac_songs .prac_songs_ul li .content {display: flex; justify-content: space-between; align-items: center; position: relative; margin: 10px 0 20px; } #sub_prac_songs .prac_songs_ul li .content .info {flex: 1; padding-right: 44px; } #sub_prac_songs .prac_songs_ul li .content .info .title {line-height: 1.3em; font-size: 16px; font-weight: bold; } #sub_prac_songs .prac_songs_ul li .content .score {position: absolute; right: 0; display: block; width: 34px; height: 34px; background: url('/include/images/spring_note_icon2.png') no-repeat center/contain;} #sub_prac_songs .prac_songs_ul li .bot {display: flex; justify-content: space-between; align-items: center; gap: 10px; } #sub_prac_songs .prac_songs_ul li .bot .period {color: #888; font-size: 12px;} #sub_prac_songs .prac_songs_ul li .bot .go_detail {display: flex; align-items: center; padding: 5px 0; color: #747474; font-size: 0; vertical-align: middle; } #sub_prac_songs .prac_songs_ul li .bot .go_detail span {line-height: 1em; font-size: 12px; font-weight: 500;} #sub_prac_songs .prac_songs_ul li .bot .go_detail i {line-height: 1em; font-size: 10px; font-weight: 500;} #sub_prac_songs .button_area {padding: 20px 20px 40px; } #sub_prac_songs .button_area button {color: #FFF; font-size: 16px; font-weight: 500; } /** 연습곡 - write */ #sub_prac_songs_write .input_wrap {margin-bottom: 20px; } #sub_prac_songs_write .button_area {padding: 20px 20px 40px; } #sub_prac_songs_write .button_area button {margin: 0; color: #FFF; font-size: 16px; font-weight: bold; } #sub_prac_songs_write .del_song_button {display: flex; justify-content: center; align-items: center; gap: 5px; position: absolute; top: 50%; right: 10px; transform: translate(0, -50%); padding: 10px; font-size: 0;} #sub_prac_songs_write .del_song_button img {width: 14px; height: auto; } #sub_prac_songs_write .del_song_button span {font-size: 14px; font-weight: 500;} #sub_prac_songs_write #mm_file_text.is_pdf {padding-right: 40px; overflow: hidden; text-overflow: ellipsis; } #sub_prac_songs_write .file_wrap .relative {flex: 1; } #sub_prac_songs_write .pdf_del {position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 24px; height: 24px; background: url('/include/images/del_song_icon.png') no-repeat center / 14px 14px;} #sub_prac_songs_write #f_write_song {padding-top: 25px; } #sub_prac_songs_write .input_form {margin-bottom: 20px; } #sub_prac_songs_write .input_form .file_wrap label {width: auto; } #sub_prac_songs_write .radio_group {flex-wrap: wrap; } #sub_prac_songs_write .radio_group .radio_label {flex: initial; width: calc((100% - 20px) / 3); max-width: 110px; } /** 연습곡 - view */ #sub_prac_songs_view .songs_view_top {display: flex; align-items: center; gap: 10px; margin-top: 20px; } #sub_prac_songs_view .songs_view_top .left {flex: 1; } #sub_prac_songs_view .songs_view_top .status_wrap {display: flex; align-items: center; gap: 5px; } #sub_prac_songs_view .songs_view_top .status_wrap .status {line-height: 14px; padding: 3px 8px; border-radius: 5px; background: #F5F7FA; color: #6F7381; font-size: 12px; font-weight: 500;} #sub_prac_songs_view .songs_view_top .status_wrap .status.ing {background: #FDE8E8; color: #EF4646;} #sub_prac_songs_view .songs_view_top .status_wrap .success_yn {font-weight: bold; } #sub_prac_songs_view .songs_view_top .title {margin-top: 10px; font-size: 16px; font-weight: 600;} #sub_prac_songs_view .songs_view_top .score {display: block; width: 34px; height: 34px; background: url('/include/images/spring_note_icon2.png') no-repeat center/contain;} #sub_prac_songs_view .songs_view_details {display: flex; gap: 10px; padding-top: 20px; padding-bottom: 15px; border-bottom: 1px solid #EDEDED; } #sub_prac_songs_view .songs_view_details > div {flex: 1; display: flex; flex-direction: column; } #sub_prac_songs_view .songs_view_details .desc {display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; margin: 0 auto; padding: 0 5px; border-radius: 6px; background: #F6F7F8; text-align: center; font-size: 15px; font-weight: 600; word-break: keep-all; } #sub_prac_songs_view .songs_view_details .subj {flex: 1; display: flex; justify-content: center; align-items: center; margin-top: 5px; text-align: center; color: #3D3D3D; font-size: 11px; font-weight: 500; } /** 노트 - list */ #sub_prac_note_list #f_subpage_sch {padding-top: 10px; } #sub_prac_note_list .sort_area {justify-content: space-between; gap: 5px; padding-bottom: 10px; } #sub_prac_note_list .sort_area .sort_category_wrap {flex: 1; padding-bottom: 0;} #sub_prac_note_list .float_button {position: fixed; top: 91%; left: 50%; transform: translate(-50%, 0); width: 100%; max-width: 1200px; height: auto; } #sub_prac_note_list .noteBtn { position: absolute; right: 20px; bottom: 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: 46px; height: 46px; border-radius: 46px; border: 0px solid #F5F5F5; background: url('/include/images/post_write_icon.png') no-repeat center/cover, #C5211F; font-size: 0; } /** 노트 - view */ #sub_prac_note_view .song_title {width: 100%; margin-top: -10px; padding-bottom: 10px; text-align: center; font-size: 18px; font-weight: bold; } #sub_prac_note_view .practice_at {color: #BDBDBD; font-size: 15px; } #sub_prac_note_view .view_top {display: flex; justify-content: space-between; align-items: center; margin-top: 20px; } #sub_prac_note_view .category {line-height: 20px; padding: 0 7px; border-radius: 5px; color: #FFF; font-size: 12px; font-weight: 600; } #sub_prac_note_view .category.cate_plan {background: #FFC000; } #sub_prac_note_view .category.cate_prac {background: #66BD2B; } #sub_prac_note_view .category.cate_lesson {background: #7E42E0; } #sub_prac_note_view .category.cate_feedback {background: #2E75B6; } #sub_prac_note_view .allow {color: #888; font-size: 12px; font-weight: 500;} #sub_prac_note_view .view_media {} #sub_prac_note_view .view_media .media_video {position: relative; margin-top: 20px; margin-bottom: 10px; border-radius: 10px; overflow: hidden;} #sub_prac_note_view .view_media .media_video:after {display: block; clear: both; content: ''; padding-bottom: calc((180 / 350) * 100%)} #sub_prac_note_view .view_media .media_video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #sub_prac_note_view .view_media .media_audio {margin-top: 20px; margin-bottom: 10px; } #sub_prac_note_view .view_cont {margin-top: 20px; line-height: 1.3em; color: #3D3D3D; font-size: 14px; } #sub_prac_note_view .view_cont img {max-width: 100%; } #sub_prac_note_view .view_info {padding-bottom: 20px; } #sub_prac_note_view .view_info > div {gap: 15px; } #sub_prac_note_view .view_info .right {color: #888; font-size: 12px; font-weight: 500; } /** 노트 - write */ #f_write_note {padding-bottom: 40px; } #f_write_note .editor_head {display: flex; justify-content: space-between; align-items: center; margin: 30px 0 0; padding: 0 20px; } #f_write_note .editor_head .cate_wrap {display: flex; align-items: center; gap: 9px; } #f_write_note .editor_head .cate_wrap .cat_badge {display: flex; align-items: center; position: relative; } #f_write_note .editor_head .cate_wrap .cat_badge input {position: absolute; width: 1px; height: 1px; margin: -1px; outline: none; appearance: none; } #f_write_note .editor_head .cate_wrap .cat_badge span {padding: 8px 17px; border-radius: 20px; border: 1px solid #BDBDBD; color: #BDBDBD; font-size: 15px; font-weight: 600;} #f_write_note .editor_head .cate_wrap .cat_badge input:checked ~ span {color: #FFF; font-weight: 500;} #f_write_note .editor_head .cate_wrap .cat_badge .cate_plan:checked ~ span {border: 1px solid #FFC000; background: #FFC000;} #f_write_note .editor_head .cate_wrap .cat_badge .cate_prac:checked ~ span {border: 1px solid #66BD2B; background: #66BD2B;} #f_write_note .editor_head .cate_wrap .cat_badge .cate_lesson:checked ~ span {border: 1px solid #7E42E0; background: #7E42E0;} #f_write_note .editor_head .allow_area .sort_select_wrap .sel_label {color: #000; font-size: 15px; font-weight: 500;} #f_write_note .editor_head .allow_area .sort_select_wrap .arrow svg {fill: none; stroke: #000; } #f_write_note .editor_body {margin: 20px 0 0; } #f_write_note .editor_body .editor_tools {display: flex; align-items: center; gap: 10px; padding: 0 15px; border-top: 1px solid #EDEDED;} #f_write_note .editor_body .editor_tools button {width: 36px; height: 36px; } #f_write_note .editor_body .editor_tools .color {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; } #f_write_note .editor_body .editor_tools .color img {width: 12px; object-fit: contain; } #f_write_note .editor_body .editor_tools .color .palette {width: 20px; height: 5px; border-radius: 1px; background: #000;} #f_write_note .editor_body .editor_tools button.active {background: #EDEDED; } #f_write_note .editor_body .editor_textarea {position: relative; border-top: 1px solid #EDEDED; border-bottom: 1px solid #EDEDED; font-size: 0; } #f_write_note .editor_body .editor_textarea textarea {display: block; width: 100%; padding: 20px; border: 0; font-size: 16px; outline: none; resize: none; } #f_write_note .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; } #f_write_note .editor_body .input_area {} #f_write_note .editor_body .input_area dl {margin: 30px 0 0; padding: 0 20px; } #f_write_note .editor_body .input_area dt {display: flex; align-items: center; gap: 4px; } #f_write_note .editor_body .input_area dt img {width: 18px; height: 18px; object-fit: contain; } #f_write_note .editor_body .input_area dt span {color: #3D3D3D; font-size: 14px; font-weight: 500;} #f_write_note .editor_body .input_area dd {margin: 10px 0 0;} #f_write_note .input_ytb input {border-bottom: 1px solid #B6B9C2; } /** 노트 - write - 오늘의 연습 */ #sub_prac_today_write .song_title {margin-top: -7px; padding-bottom: 15px; text-align: center; font-size: 18px; font-weight: 600;} #sub_prac_today_write .calendar_wrap {display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: -5px; } #sub_prac_today_write .calendar_wrap button {display: flex; justify-content: center; align-items: center; gap: 6px; } #sub_prac_today_write .calendar_wrap span {line-height: 16px; color: #BDBDBD; font-size: 15px; } #sub_prac_today_write .calendar_wrap img {width: 15px; height: auto; object-fit: contain;} /** 노트 - write - 연습곡 */ #sub_prac_note_write .song_title {margin-top: -7px; padding-bottom: 15px; text-align: center; font-size: 18px; font-weight: 600;} #sub_prac_note_write .calendar_wrap {display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: -5px; } #sub_prac_note_write .calendar_wrap button {display: flex; justify-content: center; align-items: center; gap: 6px; } #sub_prac_note_write .calendar_wrap span {line-height: 16px; color: #BDBDBD; font-size: 15px; } #sub_prac_note_write .calendar_wrap img {width: 15px; height: auto; object-fit: contain;} /** modal */ .note_calendar_modal {display: none; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 200;} .note_calendar_modal .modal_back {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6)} .note_calendar_modal .modal_cal_content {position: relative; width: 100%; max-width: 400px; padding: 20px 0; background: #FFF;} .note_calendar_modal #calendar_div {background: #FFF; } .prac_detail_modal {display: none; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 200;} .prac_detail_modal .modal_back {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6)} .prac_detail_modal .modal_content {display: flex; position: relative; width: 100%; max-width: 220px; max-height: 50vh; padding: 20px 0; border-radius: 10px; background: #FFF; overflow: hidden;} .prac_detail_modal .modal_cont_box {flex: 1; display: flex; flex-direction: column; } .prac_detail_modal .modal_cont_box .hd {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 0 20px; } .prac_detail_modal .modal_cont_box .hd .date {font-weight: bold; } .prac_detail_modal .modal_cont_box .hd .time {font-weight: bold;} .prac_detail_modal .modal_cont_box ul {flex: 1; width: 100%; overflow: auto;} .prac_detail_modal .modal_cont_box li {display: flex; justify-content: space-between; align-items: center; gap: 5px; line-height: 1.5em; margin-bottom: 10px; padding: 0 20px; } .prac_detail_modal .modal_cont_box li:last-child {margin-bottom: 0; } /* #sub_prac_songs_view .songs_view_top {padding: 0 20px 20px; border-bottom: 8px solid #F3F5F8; } #sub_prac_songs_view .songs_view_top > div {display: flex; justify-content: space-between; gap: 10px; } #sub_prac_songs_view .songs_view_top .top {align-items: center; margin-bottom: 5px; padding-bottom: 15px; } #sub_prac_songs_view .songs_view_top .top .genre {color: #747474; font-size: 13px; } #sub_prac_songs_view .songs_view_top .top .prac_stats_select {padding-top: 5px; padding-bottom: 5px; } #sub_prac_songs_view .songs_view_top .top .prac_stats_select .sel_label {font-size: 14px; font-weight: bold;} #sub_prac_songs_view .songs_view_top .top .prac_stats_select ul {margin-top: 0;} #sub_prac_songs_view .songs_view_top .top .prac_stats_select ul > li {font-size: 14px; font-weight: bold; } #sub_prac_songs_view .songs_view_top .bot {align-items: flex-end;} #sub_prac_songs_view .songs_view_top .bot .title {font-size: 16px; font-weight: bold; } #sub_prac_songs_view .songs_view_top .bot .score_wrap {font-size: 0;} #sub_prac_songs_view .songs_view_top .bot .score_wrap button {font-size: 0; } #sub_prac_songs_view .songs_view_top .bot .score_wrap button img {width: 21px; } #sub_prac_songs_view .songs_view_details { border-bottom: 8px solid #F3F5F8; } #sub_prac_songs_view .songs_view_details .top {display: flex; justify-content: space-between; align-items: baseline; margin: 0 20px; padding: 20px 0; border-bottom: 1px solid #53586F; } #sub_prac_songs_view .songs_view_details .top .cnt_days {font-size: 17px; font-weight: bold;} #sub_prac_songs_view .songs_view_details .top .strt_date {color: #747474; font-size: 14px; font-weight: 500;} #sub_prac_songs_view .songs_view_details .desc_wrap {display: flex; flex-direction: column; gap: 15px; padding: 20px; } #sub_prac_songs_view .songs_view_details dl {display: flex; gap: 30px; } #sub_prac_songs_view .songs_view_details dl dt {font-size: 15px; font-weight: bold; } #sub_prac_songs_view .songs_view_details dl dd {font-size: 15px; } #sub_prac_songs_view .songs_view_details .success_prac {display: flex; justify-content: space-between; align-items: center; padding: 20px; border-top: 1px solid #E9EAF0; } #sub_prac_songs_view .songs_view_details .success_prac label {display: flex; align-items: center; gap: 5px; position: relative;} #sub_prac_songs_view .songs_view_details .success_prac label input[type="checkbox"] {position: absolute; bottom: 0; left: 0; width: 0; height: 0; margin: -1px; border: 0; outline: none; visibility: hidden;} #sub_prac_songs_view .songs_view_details .success_prac label span {width: 17px; height: 17px; border: 1px solid #8B939D; border-radius: 5px; background: url('/include/images/chk_icon.png') no-repeat center / 22px 22px;} #sub_prac_songs_view .songs_view_details .success_prac label input[type="checkbox"]:checked ~ span {border-color: #C5211F; background-color: #C5211F;} #sub_prac_songs_view .songs_view_details .success_prac label p {font-size: 14px; font-weight: 500;} #sub_prac_songs_view .songs_view_details .success_prac > p {color: #C5211F; font-size: 14px; font-weight: 800;} #sub_prac_songs_view .songs_note .write_button {padding: 20px; } #sub_prac_songs_view .songs_note .write_button button {display: block; width: 100%; height: 47px; border: 1px solid #E0E0E0; border-radius: 10px; font-size: 0; } #sub_prac_songs_view .songs_note .write_button button span {font-size: 15px; font-weight: 500;} #sub_prac_songs_view .songs_note .date_ul {} #sub_prac_songs_view .songs_note .date_ul .date_item {border-top: 8px solid #F3F5F8; } #sub_prac_songs_view .songs_note .date_ul .date_item:first-child {border-top: 0; } #sub_prac_songs_view .songs_note .date_ul .date_item .date_top {display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #E9EAF0; } #sub_prac_songs_view .songs_note .date_ul .date_item .date_top .prac_date {font-size: 18px; font-weight: bold; } #sub_prac_songs_view .songs_note .date_ul .date_item .date_top .prac_time_select {} #sub_prac_songs_view .songs_note .date_ul .date_item .date_top .prac_time_select .prac_time_ul li {display: flex; align-items: center; flex-wrap: nowrap; gap: 12px; border-top: 1px solid #EBEBEB;} #sub_prac_songs_view .songs_note .date_ul .date_item .date_top .prac_time_select .prac_time_ul li:first-child {border-top: 0; } #sub_prac_songs_view .songs_note .date_ul .prac_ul {padding: 0 20px; } #sub_prac_songs_view .songs_note .date_ul .prac_ul > li {padding: 20px 0; border-top: 1px solid #E9EAF0; } #sub_prac_songs_view .songs_note .date_ul .prac_ul > li:first-child {border-top: 0; } #sub_prac_songs_view .songs_note .date_ul .prac_ul > li .disclosure {} #sub_prac_songs_view .songs_note .date_ul .prac_ul > li .disclosure span {display: block; width: 64px; line-height: 20px; border-radius: 6px; background: #F6F7F8; text-align: center; color: #747474; font-size: 11px; font-weight: 500;} #sub_prac_songs_view .songs_note .date_ul .prac_ul > li .note_subject {margin-top: 10px; font-size: 0; } #sub_prac_songs_view .songs_note .date_ul .prac_ul > li .note_subject .category {display: inline-block; width: 36px; line-height: 20px; margin-right: 8px; border-radius: 6px; text-align: center; color: #FFF; font-size: 10px; font-weight: 600; vertical-align: middle; } #sub_prac_songs_view .songs_note .date_ul .prac_ul > li .note_subject .category.prac {background: #FFC81E; } #sub_prac_songs_view .songs_note .date_ul .prac_ul > li .note_subject .category.lesson {background: #40A9A0; } #sub_prac_songs_view .songs_note .date_ul .prac_ul > li .note_subject .category.video {background: #CD0000; } #sub_prac_songs_view .songs_note .date_ul .prac_ul > li .note_subject .category.audio {background: #FF8C0A; } #sub_prac_songs_view .songs_note .date_ul .prac_ul > li .note_subject .song_title {line-height: 1.5em; font-size: 15px; font-weight: 600; vertical-align: middle; } #sub_prac_songs_view .songs_note .date_ul .prac_ul > li .note_content {margin-top: 8px; line-height: 1.3em; color: #484848; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 2.6em; white-space: normal; overflow: hidden; } #sub_prac_songs_view .songs_note .date_ul .prac_ul > li .note_info {display: flex; justify-content: space-between; align-items: center; margin-top: 15px; } #sub_prac_songs_view .songs_note .date_ul .prac_ul > li .note_info ul {display: flex; align-items: flex-start; gap: 20px; } #sub_prac_songs_view .songs_note .date_ul .prac_ul > li .note_info ul li {display: flex; align-items: flex-start; gap: 8px; margin: -7px 0; padding: 7px 0; } #sub_prac_songs_view .songs_note .date_ul .prac_ul > li .note_info .left img {width: 15px; height: auto; } #sub_prac_songs_view .songs_note .date_ul .prac_ul > li .note_info .left span {color: #747474; font-size: 13px;} #sub_prac_songs_view .songs_note .date_ul .prac_ul > li .note_info .right img {width: 16px; height: auto;} #sub_prac_songs_view .songs_note .date_ul .prac_ul > li .note_info .right span {color: #BCBCBC; font-size: 12px; font-weight: 500;} #sub_prac_songs_view .songs_note .date_ul > li.empty_li {display: flex; justify-content: center; align-items: center; padding: 60px 0; text-align: center; font-size: 15px; font-weight: 500;} /** 오늘의 연습 */ #sub_prac_today {} #sub_prac_today .date_ul {} #sub_prac_today .date_ul > .date_item {border-top: 8px solid #F3F5F8;} #sub_prac_today .date_ul > .date_item:first-child {border-top: 0;} #sub_prac_today .date_ul > .date_item > .date_top {display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #E9EAF0;} #sub_prac_today .date_ul > .date_item > .date_top .select_ul b {font-size: 14px; } #sub_prac_today .date_ul > .date_item > .date_top .select_ul span {font-size: 14px; font-weight: 500;} #sub_prac_today .date_ul > .date_item > .note_ul {padding: 0 20px; } #sub_prac_today .date_ul > .date_item > .note_ul > li {padding: 20px 0; border-top: 1px solid #E9EAF0; } #sub_prac_today .date_ul > .date_item > .note_ul > li:first-child {border-top: 0; } #sub_prac_today .date_ul > .date_item > .note_ul > li .disclosure {} #sub_prac_today .date_ul > .date_item > .note_ul > li .disclosure span {display: block; width: 64px; line-height: 20px; border-radius: 6px; background: #F6F7F8; text-align: center; color: #747474; font-size: 11px; font-weight: 500;} #sub_prac_today .date_ul > .date_item > .note_ul > li .note_subject {margin-top: 10px; font-size: 0; } #sub_prac_today .date_ul > .date_item > .note_ul > li .note_subject .category {display: inline-block; width: 36px; line-height: 20px; margin-right: 8px; border-radius: 6px; text-align: center; color: #FFF; font-size: 10px; font-weight: 600; vertical-align: middle; } #sub_prac_today .date_ul > .date_item > .note_ul > li .note_subject .category.prac {background: #FFC81E; } #sub_prac_today .date_ul > .date_item > .note_ul > li .note_subject .category.lesson {background: #40A9A0; } #sub_prac_today .date_ul > .date_item > .note_ul > li .note_subject .category.video {background: #CD0000; } #sub_prac_today .date_ul > .date_item > .note_ul > li .note_subject .category.audio {background: #FF8C0A; } #sub_prac_today .date_ul > .date_item > .note_ul > li .note_subject .song_title {line-height: 1.5em; font-size: 15px; font-weight: 600; vertical-align: middle; } #sub_prac_today .date_ul > .date_item > .note_ul > li .note_content {margin-top: 8px; line-height: 1.3em; color: #484848; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; /* 라인수 */ -webkit-box-orient: vertical; max-height: 2.6em; white-space: normal; overflow: hidden; } #sub_prac_today .date_ul > .date_item > .note_ul > li .note_info {display: flex; justify-content: space-between; align-items: center; margin-top: 15px; } #sub_prac_today .date_ul > .date_item > .note_ul > li .note_info ul {display: flex; align-items: flex-start; gap: 20px; } #sub_prac_today .date_ul > .date_item > .note_ul > li .note_info ul li {display: flex; align-items: flex-start; gap: 8px; margin: -7px 0; padding: 7px 0; } #sub_prac_today .date_ul > .date_item > .note_ul > li .note_info .left img {width: 15px; height: auto; } #sub_prac_today .date_ul > .date_item > .note_ul > li .note_info .left span {color: #747474; font-size: 13px;} #sub_prac_today .date_ul > .date_item > .note_ul > li .note_info .right img {width: 16px; height: auto;} #sub_prac_today .date_ul > .date_item > .note_ul > li .note_info .right span {color: #BCBCBC; font-size: 12px; font-weight: 500;} #sub_prac_today .date_ul > .date_item > .note_ul > li.empty_li {display: flex; justify-content: center; align-items: center; padding: 40px 0;} /** 오늘의 연습 - write */ #sub_prac_today_write .sub_page_content .top {display: flex; justify-content: center; align-items: center; margin-bottom: 30px; } #sub_prac_today_write .sub_page_content .top .today_at {padding: 12px 25px; border-radius: 22px; border: 1px solid #F4F4F4; background: #FAFAFA; font-size: 13px; font-weight: 600;} #sub_prac_today_write .write_form_wrap {padding-top: 20px; } #sub_prac_today_write .input_form .input_wrap, #sub_prac_today_write .input_form .textarea_wrap {margin-bottom: 30px; } #sub_prac_today_write .input_form .info_text {position: relative; margin-top: -20px; margin-bottom: 30px; } #sub_prac_today_write .input_form .select_wrap .sel_label.active {border-bottom-color: transparent; border-bottom-left-radius: 0; border-bottom-right-radius: 0;} #sub_prac_today_write .input_form .select_wrap ul {border: 1px solid #000; border-top-color: transparent; border-radius: 0 0 10px 10px;} #sub_prac_today_write .input_form .select_wrap ul li {line-height: 36px; } #sub_prac_today_write .media_wrap > div {display: none;} #sub_prac_today_write .radio_check_wrap {margin-top: -10px; margin-bottom: 40px; } #sub_prac_today_write .button_area {padding: 0 20px 40px; } #sub_prac_today_write .button_area button {display: block; width: 100%; margin: 0; color: #FFF; font-size: 16px; font-weight: bold;} /** 연습곡 노트 - write */ #sub_prac_note_write .sub_page_content .top {display: flex; justify-content: center; align-items: center; } #sub_prac_note_write .sub_page_content .top .today_at {padding: 12px 25px; border-radius: 22px; border: 1px solid #F4F4F4; background: #FAFAFA; font-size: 13px; font-weight: 600;} #sub_prac_note_write .song_info {padding: 20px; border-bottom: 8px solid #F3F5F8; } #sub_prac_note_write .song_info .genre {margin-bottom: 10px; font-size: 13px; } #sub_prac_note_write .song_info .song_title {font-size: 16px; font-weight: bold;} #sub_prac_note_write .write_form_wrap {padding-top: 20px; } #sub_prac_note_write .input_form .input_wrap, #sub_prac_today_write .input_form .textarea_wrap {margin-bottom: 30px; } #sub_prac_note_write .input_form .info_text {position: relative; margin-top: -20px; margin-bottom: 30px; } #sub_prac_note_write .input_form .select_wrap .sel_label.active {border-bottom-color: transparent; border-bottom-left-radius: 0; border-bottom-right-radius: 0;} #sub_prac_note_write .input_form .select_wrap ul {border: 1px solid #000; border-top-color: transparent; border-radius: 0 0 10px 10px;} #sub_prac_note_write .input_form .select_wrap ul li {line-height: 36px; } #sub_prac_note_write .media_wrap > div {display: none;} #sub_prac_note_write .radio_check_wrap {display: flex; align-items: center; gap: 15px; margin-top: -10px; margin-bottom: 40px;} #sub_prac_note_write .radio_check_wrap label {display: flex; align-items: center; gap: 10px; position: relative; } #sub_prac_note_write .radio_check_wrap label input[type="radio"] {position: absolute; top: 0; left: 0; width: 1px; height: 1px; border: 0; outline: none; visibility: hidden; } #sub_prac_note_write .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; } #sub_prac_note_write .radio_check_wrap label p {font-size: 14px; font-weight: 500; letter-spacing: -0.04em; word-break: keep-all;} #sub_prac_note_write .radio_check_wrap label input[type="radio"]:checked ~ span {background-color: #5F5F5F; } #sub_prac_note_write .button_area {padding: 0 20px 40px; } #sub_prac_note_write .button_area button {margin: 0; color: #FFF; font-size: 16px; font-weight: bold;} /** note view modal */ #note_view_modal .popup_box {display: flex; flex-direction: column; } #note_view_modal .popup_top {display: flex; justify-content: space-between; align-items: center; padding: 10px 20px 20px;} #note_view_modal .popup_top .left {display: flex; align-items: center; gap: 10px; } #note_view_modal .popup_top .left button {display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 15px;} #note_view_modal .popup_top .left button img {display: block; width: 12px; } #note_view_modal .popup_top .left .note_edit {background: #000;} #note_view_modal .popup_top .left .note_edit span {color: #FFF; font-size: 14px; font-weight: bold; } #note_view_modal .popup_top .left .note_del {background: #F6F7F8;} #note_view_modal .popup_top .left .note_del span {color: #757575; font-size: 12px; font-weight: 500; } #note_view_modal .popup_top .right button {margin-right: -10px; padding: 10px;} #note_view_modal .popup_top .right button img {display: block; width: 14px;} #note_view_modal .popup_content {flex: 1; display: flex; flex-direction: column; overflow: hidden; } #note_view_modal .popup_content .note_view_wrap {flex: 1; overflow: auto;} #note_view_modal .popup_content .note_view_wrap .note_view {padding: 20px; border-bottom: 1px solid #E9EAF0;} #note_view_modal .popup_content .note_view_wrap .view_top {display: flex; justify-content: space-between; align-items: center;} #note_view_modal .popup_content .note_view_wrap .view_top .category {width: 34px; line-height: 20px; border-radius: 6px; text-align: center; color: #FFF; font-size: 10px; font-weight: 600;} #note_view_modal .popup_content .note_view_wrap .view_top .category.prac {background: #FFC81E; } #note_view_modal .popup_content .note_view_wrap .view_top .category.video {background: #CD0000; } #note_view_modal .popup_content .note_view_wrap .view_top .category.audio {background: #FF8C0A; } #note_view_modal .popup_content .note_view_wrap .view_top .category.lesson {background: #40A9A0; } #note_view_modal .popup_content .note_view_wrap .view_top .open_type {line-height: 18px; padding: 0 6px; border-radius: 6px; background: #F6F7F8; color: #747474; font-size: 11px; font-weight: 600;} #note_view_modal .popup_content .note_view_wrap .view_subject {line-height: 1.3em; margin-top: 10px; font-size: 16px; font-weight: 600;} #note_view_modal .popup_content .note_view_wrap .view_content {line-height: 1.3em; margin-top: 15px; font-size: 13px; font-weight: 500;} #note_view_modal .popup_content .note_view_wrap .media_video {position: relative; margin-top: 20px; margin-bottom: 10px; border-radius: 10px; overflow: hidden;} #note_view_modal .popup_content .note_view_wrap .media_video:after {display: block; clear: both; content: ''; padding-bottom: calc((180 / 350) * 100%)} #note_view_modal .popup_content .note_view_wrap .media_video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #note_view_modal .popup_content .note_view_wrap .media_audio {margin-top: 20px; margin-bottom: 10px; } #note_view_modal .popup_content .note_view_wrap .created_at {margin-top: 15px; color: #747474; font-size: 13px; font-weight: 500;} #note_view_modal .popup_content .note_view_wrap .view_info {margin-top: 20px; padding: 0; border: 0;} #note_view_modal .popup_content .note_view_wrap .reply_list {} #note_view_modal .popup_content .note_view_wrap .reply_list > .empty_li {display: flex; justify-content: center; align-items: center; padding: 40px 0; text-align: center; } /** 챌린지 카드 */ #sub_challenge_list .cnt_board {display: flex; padding: 7px 14px; border: 1px solid #F4F4F4; border-radius: 15px; background: #FAFAFA; font-size: 14px; font-weight: 500;} #sub_challenge_list .card_ul {padding: 30px 20px; } #sub_challenge_list .card_ul li {position: relative; margin-top: 20px; border-radius: 20px; background: #F5F7FA; overflow: hidden;} #sub_challenge_list .card_ul li:first-child {margin-top: 0;} #sub_challenge_list .card_ul li:before {display: block; clear: both; content: ''; position: relative; padding-bottom: calc((224/350) * 100%); background: rgba(0,0,0,0.5); z-index: 15;} #sub_challenge_list .card_ul li img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 10;} #sub_challenge_list .card_ul li .ch_stat {display: block; position: absolute; top: 20px; left: 20px; width: 60px; line-height: 25px; border-radius: 13px; color: #FFF; text-align: center; font-size: 12px; font-weight: bold; z-index: 20;} #sub_challenge_list .card_ul li .ch_stat.doing {background: #C5211F; } #sub_challenge_list .card_ul li .ch_stat.done {background: #3C9D5D; } #sub_challenge_list .card_ul li .ch_period {position: absolute; bottom: 20px; right: 20px; color: #FFF; font-size: 12px; z-index: 20;} #sub_challenge_list .card_ul li.empty_li {display: flex; justify-content: center; align-items: center; padding: 40px 0; background: none; text-align: center; } #sub_challenge_list .card_ul li.empty_li:before {display: none; } /** 챌린지 카드 - write */ #sub_challenge_write .card_poster {position: relative; background: #F5F7FA; border-radius: 20px; overflow: hidden;} #sub_challenge_write .card_poster:before {display: block; clear: both; content: ''; position: relative; padding-bottom: calc((224/350) * 100%); background: rgba(0,0,0,0.5); z-index: 15;} #sub_challenge_write .card_poster img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 10;} #sub_challenge_write .card_poster .ch_stat {display: block; position: absolute; top: 20px; left: 20px; width: 60px; line-height: 25px; border-radius: 13px; color: #FFF; text-align: center; font-size: 12px; font-weight: bold; z-index: 20;} #sub_challenge_write .card_poster .ch_stat.doing {background: #C5211F; } #sub_challenge_write .card_poster .ch_stat.done {background: #3C9D5D; } #sub_challenge_write .card_poster .ch_period {position: absolute; bottom: 20px; right: 20px; color: #FFF; font-size: 12px; z-index: 20;} #sub_challenge_write .write_form_wrap {margin-top: 20px; } #sub_challenge_write .song_ul > li {margin-top: 20px; border-radius: 20px; background: #FAFAFA; overflow: hidden;} #sub_challenge_write .song_ul > li:first-child {margin-top: 0; } #sub_challenge_write .song_ul .song_info {position: relative; padding: 9px 20px; } #sub_challenge_write .song_ul .song_info:after {display: block; clear: both; content: ''; position: absolute; top: 50%; right: 20px; transform: translate(0, -50%) rotate(0deg); width: 15px; height: 15px; background: url('./include/images/select_arrow.png') no-repeat center/ contain; } #sub_challenge_write .song_ul .song_info .composer {line-height: 1.3em; font-size: 14px; font-weight: 500; } #sub_challenge_write .song_ul .song_info .song_title {line-height: 1.3em; color: #747474; font-size: 13px; } #sub_challenge_write .song_ul .input_form_ul {display: none; margin-top: -9px; padding: 20px; } #sub_challenge_write .song_ul .input_form_ul .matching_button { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 56px; margin-bottom: 30px; padding: 0 20px; border: 1px solid #000; border-radius: 10px; background: url('/include/images/right_link_icon.png') no-repeat right 20px center/ 9px auto, #FFF; font-size: 0; } #sub_challenge_write .song_ul .input_form_ul .matching_button span {flex: 1; display: block; padding-right: 10px; font-size: 15px; font-weight: 500;} #sub_challenge_write .song_ul .input_form_ul .input_wrap, #sub_challenge_write .song_ul .input_form_ul .textarea_wrap {margin-bottom: 30px;} #sub_challenge_write .song_ul .input_form_ul li:last-child > div {margin-bottom: 0;} #sub_challenge_write .song_ul .input_form_ul .info_text_group {margin-top: -20px; margin-bottom: 30px; } #sub_challenge_write .song_ul .input_form_ul .info_text_group > .info_text {position: static;} #sub_challenge_write .song_ul > li.on .song_info:after {transform: translate(0, -50%) rotate(180deg); } #sub_challenge_write .song_ul > li.on .input_form_ul {display: block;} #sub_challenge_write .success_check_area {margin-top: 20px; } #sub_challenge_write .success_check_area .success_tag {display: flex; justify-content: center; align-items: center; position: relative; margin-top: 30px; margin-bottom: 30px; border: 1px solid #ECECEC; height: 56px; border-radius: 10px; } #sub_challenge_write .success_check_area .success_tag span {color: #747474; font-size: 16px; font-weight: 500;} #sub_challenge_write .success_check_area .radio_check_wrap {display: none; margin-top: 30px; margin-bottom: 40px;} #sub_challenge_write .success_check_area .success_tag.active {} #sub_challenge_write .success_check_area .success_tag.active ~ .radio_check_wrap {display: flex; } #sub_challenge_write .button_area button {color: #FFF; font-size: 16px; font-weight: bold; } #song_matching_modal .modal_box {display: flex; flex-direction: column; height: 80vh;} #song_matching_modal .modal_box .modal_content {flex: 1; display: flex; flex-direction: column; } #song_matching_modal .modal_box .modal_content .sch_wrap {margin-top: 20px; margin-bottom: 30px; } #song_matching_modal .modal_box .modal_content .sch_wrap input {flex: 1; } #song_matching_modal .modal_box .modal_content .song_list_ul {flex: 1; display: flex; flex-direction: column; gap: 10px; overflow: auto;} #song_matching_modal .modal_box .modal_content .song_list_ul li {padding: 20px; border: 1px solid #E9EAF0; border-radius: 12px; font-size: 16px; font-weight: bold; } #song_matching_modal .modal_box .modal_content .song_list_ul .empty_li {display: flex; justify-content: center; align-items: center; padding: 40px 0; border: 0; } /** 악보 */ #sub_score_view .pdf_nav {text-align: center; margin-bottom: 20px; font-size: 14px; font-weight: 500;} #sub_score_view .canvas_wrap {position: relative; /* max-width: 90%; */ margin: 0 auto; padding: 0 5%; } #sub_score_view .canvas_wrap button {display: none; position: absolute; top: 0; width: calc(50% - 10px); height:100%; font-size: 0;} #sub_score_view .canvas_wrap button.on {display: block; } #sub_score_view .canvas_wrap #prev {left: 0; } #sub_score_view .canvas_wrap #next {right: 0; } #sub_score_view #the-canvas {direction: ltr; display: block; width: 100%; margin: 0 auto; /* border: 1px solid #000; */} /** modal */ #edit_time_modal .edit_table {display: flex; flex-direction: column; gap: 15px; margin-top: 30px; margin-bottom: 30px; } #edit_time_modal .edit_table dl {display: flex; justify-content: center; align-items: center; gap: 20px; } #edit_time_modal .edit_table dl dt {font-size: 16px; font-weight: bold;} #edit_time_modal .edit_table dl dd {flex: 1; display: flex; justify-content: center; align-items: center; gap: 20px; } #edit_time_modal .edit_table dl dd div {flex: 1; display: flex; justify-content: center; align-items: center; gap: 20px; height: 56px; padding: 0 20px; border-radius: 10px; border: 1px solid #000; overflow: hidden;} #edit_time_modal .edit_table dl dd div > span {font-size: 16px; font-weight: bold; } #edit_time_modal .edit_table dl dd div input {flex: 1; display: block; width: 10px; height: 100%; border: 0; background: none; font-size: 16px; font-weight: bold; outline: none; } #edit_time_modal .edit_table dl.start dd div {border-color: #F7F7F7; background: #F7F7F7; } #edit_time_modal .button_area button {display: block; width: 100%; height: 56px; padding: 0; border-radius: 10px; background: #C5211F; color: #FFF; font-size: 16px; font-weight: bold; } /** share - modal */ .page_popup_modal {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 200;} .page_popup_modal h2 {font-size: 18px; } .page_popup_modal .popup_box {display: flex; flex-direction: column; position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); width: 100%; max-width: 800px; height: 100%; background: #FFF; z-index: 205;} .page_popup_modal .popup_box .header {padding-top: calc(40px + 15px); } .page_popup_modal .popup_box .header .nav_inner {position: relative; display: flex; justify-content: center; align-items: center; padding: 0 20px;} .page_popup_modal .popup_box .share_content {flex: 1; padding-top: 30px; } .page_popup_modal .popup_box .share_content .image_wrap {position: relative; width: 100%; max-width: 500px; margin: 0 auto; background: #C5211F; font-size: 0; } .page_popup_modal .popup_box .share_content .image_wrap:after {display: block; clear: both; content: ''; padding-bottom: 100%;} .page_popup_modal .popup_box .share_content .image_wrap > img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; object-fit: cover;} .page_popup_modal .popup_box .share_content .image_wrap .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 40px); height: calc(100% - 40px); } .page_popup_modal .popup_box .share_content .image_wrap .box_design { display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px solid #FFF; } .page_popup_modal .popup_box .share_content .image_wrap .attainment .box_design {border: none; background: url('/include/images/share_attainment_bg.svg') no-repeat center/ contain;} .page_popup_modal .popup_box .share_content .image_wrap .box_content { display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 100%; } .page_popup_modal .popup_box .share_content .image_wrap .box .prac_date {margin-top: 10px; line-height: 16px; color: #FFF; font-size: 13px; font-weight: 500; } .page_popup_modal .popup_box .share_content .image_wrap .box .logo {display: flex; align-items: flex-start; gap: 3px; position: absolute; top: 7%; right: 7%; } .page_popup_modal .popup_box .share_content .image_wrap .box .logo div { display: block; width: 18px; height: 18px; border-radius: 18px; background: url('/include/images/logo_symbol.png') no-repeat top 0px center/contain, #FFF; } .page_popup_modal .popup_box .share_content .image_wrap .box .logo img {width: 64px; height: auto; } .page_popup_modal .popup_box .share_content .image_wrap .box .prac_time {text-align: center;} .page_popup_modal .popup_box .share_content .image_wrap .box .prac_time img {width: 41px; height: auto;} .page_popup_modal .popup_box .share_content .image_wrap .box .prac_time div {} .page_popup_modal .popup_box .share_content .image_wrap .box .prac_time span {color: #FFF; font-size: 24px; font-weight: bold; } .page_popup_modal .popup_box .button_area {display: flex; justify-content: center; align-items: flex-start; gap: 10px; padding: 0 20px 40px;} .page_popup_modal .popup_box .button_area > * {flex: 1; height: 56px; border: 1px solid #C5211F; border-radius: 10px; font-size: 16px; font-weight: bold; } .page_popup_modal .popup_box .button_area .cam_button {flex: initial; display: flex; justify-content: center; align-items: center; width: 56px; font-size: 0;} .page_popup_modal .popup_box .button_area .cam_button img {width: 26px; } .page_popup_modal .popup_box .button_area .save_img_button {background: #C5211F; color: #FFF;} .page_popup_modal .popup_box .button_area .save_post_button {color: #C5211F; } @media screen and (min-width: 375px){ #bottomsheet .sheet_container .prac_content .prac_list_ul li > .time {display: block;} } @media screen and (min-width: 768px){ }