/**********************************************************************************************
 * 파일명: mypage.css
 * 저작권:
 *     NOWC-2026-SWAYEDUNET-A7D4C9
 *     © 나우컴퍼니(NOWCOMPANY) | https://nowcompany.kr
 *     All rights reserved.
 **********************************************************************************************/

header { position: sticky; top: 0; z-index: 9999; background: white; }
.mypage_header { position: relative; z-index: 999; }
.mypage_header_button { display: inline-block; cursor: pointer; padding: 15px; z-index: 1001; position: relative; }
.mypage_header_checkbox { display: none; }
.mypage_header_nav { position: relative; left: 0; width: 200px; background: #fff; border-right: 1px solid #e6e6e6; transform: translateX(-100%); transition: transform 0.4s ease; z-index: 1000; overflow-y: auto; }
.mypage_header_nav.open { display: block; transform: translateX(0); }
.mypage_header_menu { list-style: none; margin: 0; padding: 0; }
.mypage_header_menu li { display: flex; align-items: center; height: 52px; padding: 0 20px 0 62px; box-sizing: border-box; color: #616161; cursor: pointer; position: relative; user-select: none; }
.mypage_header_menu li:hover { background-color: #eeeeee; }
.mypage_header_menu li:hover a { color: #1c69ad; }
.mypage_header_menu li.main.on{ color: #ffffff; background-color: #4576ff;}
.mypage_header_menu li a { text-decoration: none; font-size: 18px; color: inherit; display: block; width: 100%; }
.mypage_header_menu li a:hover { color: #1c69ad; }
.mypage_header_menu li::before { font-weight: 900; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 18px; width: 22px; height: 22px; text-align: center; }
.mypage_header_menu li::before { content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 8px; background-color: #6b6b6b; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; vertical-align: middle; }
.mypage_header_menu .on{    background-color:#e8e8e8}




/* 나의 학습현황 */
.mypage_header_menu li.homework::before {
    -webkit-mask-image: url('../img/sub/mypage/homework.svg');
    mask-image: url('../img/sub/mypage/homework.svg');
}


/* 대시보드 */
.mypage_header_menu li.dashboard::before {
    -webkit-mask-image: url('../img/sub/mypage/dashboard-monitor.svg');
    mask-image: url('../img/sub/mypage/dashboard-monitor.svg');
}

/* 나의 학습 */
.mypage_header_menu li.myclass::before {
    -webkit-mask-image: url('../img/sub/mypage/book-alt.svg');
    mask-image: url('../img/sub/mypage/book-alt.svg');
}

/* 나의 학습내역 */
.mypage_header_menu li.myclass_recent::before {
    -webkit-mask-image: url('../img/sub/mypage/video-duration.svg');
    mask-image: url('../img/sub/mypage/video-duration.svg');
}


/* 과정 홈 */
.mypage_header_menu li.myclass_detail::before {
    -webkit-mask-image: url('../img/sub/mypage/home.svg');
    mask-image: url('../img/sub/mypage/home.svg');
    
}

/* 토론 */
.mypage_header_menu li.debate::before {
    -webkit-mask-image: url('../img/sub/mypage/debate.svg');
    mask-image: url('../img/sub/mypage/debate.svg');
    
}

/* 설문 */
.mypage_header_menu li.vote::before {
    -webkit-mask-image: url('../img/sub/mypage/survey.svg');
    mask-image: url('../img/sub/mypage/survey.svg');
    
}

/* 과정질문 */
.mypage_header_menu li.qna::before {
    -webkit-mask-image: url('../img/sub/mypage/question.svg');
    mask-image: url('../img/sub/mypage/question.svg');
    
}

/* 수업노트 */
.mypage_header_menu li.note::before {
    -webkit-mask-image: url('../img/sub/mypage/note.svg');
    mask-image: url('../img/sub/mypage/note.svg');
    
}

/* 신고내역 */
.mypage_header_menu li.error::before {
    -webkit-mask-image: url('../img/sub/mypage/error.svg');
    mask-image: url('../img/sub/mypage/error.svg');
    
}

/* 인증내역 */
.mypage_header_menu li.auth::before {
    -webkit-mask-image: url('../img/sub/mypage/certification.svg');
    mask-image: url('../img/sub/mypage/certification.svg');
    
}

/* 신청내역 */
.mypage_header_menu li.myclass_apply::before {
    -webkit-mask-image: url('../img/sub/mypage/e-learning.svg');
    mask-image: url('../img/sub/mypage/e-learning.svg');
    
}

/* 활성화 상태 */
.mypage_header_menu li.main.on::before {
    background-color: #ffffff;
}

/* 상단 이동버튼 */
.headline .tit {display:inline-block;padding:12px 24px;background:linear-gradient(90deg,#4476ff,#66a1ff);color:#fff;font-weight:600;font-size:16px;border-radius:4px;cursor:pointer;text-align:center;transition:all 0.3s ease;box-shadow:0 4px 10px rgba(68,118,255,0.3);}
.headline .tit:hover {transform:translateY(-2px);box-shadow:0 6px 12px rgba(68,118,255,0.4);background:linear-gradient(90deg,#3355cc,#5588ff);}
.headline .tit:active {transform:translateY(0);box-shadow:0 4px 10px rgba(68,118,255,0.3);}
@media(max-width:650px){
    .headline .tit{display:none;}
}

.mypage_header_checkbox:checked + .mypage_header_button .mypage_header_bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.mypage_header_checkbox:checked + .mypage_header_button .mypage_header_bar:nth-child(2) { opacity: 0; }
.mypage_header_checkbox:checked + .mypage_header_button .mypage_header_bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media screen and (min-width: 1220px) {
    .mypage_header_checkbox, .mypage_header_button { display: none !important; }
    .mypage_header_nav { transform: translateX(0) !important; position: sticky; width: 200px; height: calc(100vh - 74px); top:74px; border-right: 1px solid #e6e6e6; }
}

@media screen and (max-width: 1219px) {
    .lnb-left.lnb-mypage li:nth-child(1){display:flex;width: 95px;}
    .mypage_header_nav { position: fixed; top: 74px; left: 0; width: 200px; height: calc(100% - 74px); background: #fff; border-right: 1px solid #e6e6e6; transform: translateX(-100%); transition: transform 0.4s ease; z-index: 1000; overflow-y: auto; }
    .mypage_header_nav.open { transform: translateX(0); }
}

@media screen and (max-width: 767px) {
    .lnb-left.lnb-mypage li:nth-child(1){ width: 45px;}
    .mypage_header_nav { top: 50px; height: calc(100% - 50px); }
}

/* .mypage-btn-box 내부 구조 */
.mypage-btn-box { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin: 15px 0px;}
.mypage-btn-box .mypage-btn-box-left { display:flex; gap:8px; }
.mypage-btn-box .mypage-btn-box-right { display:flex; gap:8px; }

/* 수정/삭제 버튼 */
.mypage-btn-box .btn-button.edit-delete { min-width:100px; line-height:30px; font-weight:600; padding:8px 16px; background-color:#fff; border:1px solid #e0e0e0; color:#9e9e9e; font-size:14px; border-radius:4px; cursor:pointer; transition:all 0.2s ease; }
.mypage-btn-box .btn-button.edit-delete:hover { background-color:#9e9e9e; color:#fff; }
.mypage-btn-box .btn-button.edit-delete.insert { min-width:100px; line-height:30px; font-weight:600; padding:8px 16px; background-color:#4576ff; border:1px solid #4576ff; color:#ffffff; font-size:14px; border-radius:4px; cursor:pointer; transition:all 0.2s ease; }
.mypage-btn-box .btn-button.edit-delete.insert:hover { background-color:#ffffff; color:#4576ff; border:1px solid #4576ff;}

/* 목록 버튼 */
.mypage-btn-box .btn-button.list-btn { min-width:100px; line-height:30px; font-weight:600; padding:8px 16px; background-color:#fff; border:1px solid #000; color:#000; font-size:14px; border-radius:4px; cursor:pointer; transition:all 0.2s ease; }
.mypage-btn-box .btn-button.list-btn:hover { background-color:#000; color:#fff; border:1px solid #fff; }

/* 작은 화면 반응형 */
@media (max-width:480px) { .mypage-btn-box { flex-direction:column; align-items:stretch; } .mypage-btn-box .mypage-btn-box-left, .mypage-btn-box .mypage-btn-box-right { justify-content:center; width:100%; } }
/* .mypage-btn-box 내부 구조 */

.btn_box { margin: 0 auto; display: table; }

.detail_btn{min-width: 100px;line-height: 42px;font-weight: 600;border-radius: 4px; text-align: center; cursor: pointer; transition: all 0.2s ease-in-out; display:block; font-size: 16px; background: #4576ff; border: solid 1px #4576ff; color: #fff;  display: inline-block;}
.detail_btn:hover {border: 1px solid #4576ff; background: #fff; color: #4576ff; }

.detail_btn02{min-width: 100px;line-height: 42px;font-weight: 600;border-radius: 4px; text-align: center; cursor: pointer; transition: all 0.2s ease-in-out; display:block; font-size: 16px; background: #e5617a; border: solid 1px #e5617a; color: #fff;  display: inline-block;}
.detail_btn02:hover { background:#fff; color:#e5617a; }

.detail_btn03{min-width: 100px;line-height: 42px;font-weight: 600;border-radius: 4px; text-align: center; cursor: pointer; transition: all 0.2s ease-in-out; display:block; font-size: 16px; background: #f7da13; border: solid 1px #f7da13; color: #333;  display: inline-block;}
.detail_btn03:hover {border: 1px solid #f7da13; background:#fff; color: #333;}

.detail_btn04{min-width: 100px;line-height: 42px;font-weight: 600;border-radius: 4px; text-align: center; cursor: pointer; transition: all 0.2s ease-in-out; display:block; font-size: 16px; background: #242424; border: solid 1px #242424; color: #fff;  display: inline-block;}
.detail_btn04:hover {border: 1px solid #242424; background:#fff; color: #333;}

.detail_btn_end{min-width: 100px;line-height: 42px;font-weight: 600;border-radius: 4px; text-align: center; cursor: pointer; transition: all 0.2s ease-in-out; display:block; font-size: 16px; background: #828282; border: solid 1px #828282; color: #fff;  display: inline-block;}
.detail_btn_end:hover { background:#fff; color:#828282; }

.study_btn{width: 100%;line-height: 42px;font-weight: 600; text-align: center; cursor: pointer; transition: all 0.2s ease-in-out; display:block; font-size: 16px; background: #183073; border: solid 1px #183073; color: #fff;  display: inline-block;}
.study_btn:hover {border: 1px solid #183073;background: #fff; color: #333; }

.svg-icon { width: 24px; height: 24px; display: inline-block; background-color: #6b6b6b; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }

/* 아이콘별 마스크 설정 */
.svg-icon.exit {
    -webkit-mask-image: url('../img/sub/mypage/exit.svg');
    mask-image: url('../img/sub/mypage/exit.svg');
}

.svg-icon.download {
    -webkit-mask-image: url('../img/sub/mypage/download.svg');
    mask-image: url('../img/sub/mypage/download.svg');
}

.svg-icon.detail {
    -webkit-mask-image: url('../img/sub/mypage/detail.svg');
    mask-image: url('../img/sub/mypage/detail.svg');
}

.svg-icon.survey {
    -webkit-mask-image: url('../img/sub/mypage/survey.svg');
    mask-image: url('../img/sub/mypage/survey.svg');
}

.svg-icon.complete {
    -webkit-mask-image: url('../img/sub/mypage/complete.svg');
    mask-image: url('../img/sub/mypage/complete.svg');
}

.svg-icon.error {
    -webkit-mask-image: url('../img/sub/mypage/error.svg');
    mask-image: url('../img/sub/mypage/error.svg');
}

.svg-icon.arrow-right {
    -webkit-mask-image: url('../img/sub/mypage/arrow-right.svg');
    mask-image: url('../img/sub/mypage/arrow-right.svg');
}

.svg-icon.arrow-left {
    -webkit-mask-image: url('../img/sub/mypage/arrow-left.svg');
    mask-image: url('../img/sub/mypage/arrow-left.svg');
}

.svg-icon.remote {
    width:20px;
    -webkit-mask-image: url('../img/sub/mypage/remote.svg');
    mask-image: url('../img/sub/mypage/remote.svg');
}

.svg-icon.question {
    -webkit-mask-image: url('../img/sub/mypage/question.svg');
    mask-image: url('../img/sub/mypage/question.svg');
}

.svg-icon.debate {
    -webkit-mask-image: url('../img/sub/mypage/debate.svg');
    mask-image: url('../img/sub/mypage/debate.svg');
}

.svg-icon.exit-end {
    width:20px;
    -webkit-mask-image: url('../img/sub/mypage/exit-end.svg');
    mask-image: url('../img/sub/mypage/exit-end.svg');
}

.svg-icon.home {
    -webkit-mask-image: url('../img/sub/mypage/home.svg');
    mask-image: url('../img/sub/mypage/home.svg');
}

.svg-icon.caret-right {
    -webkit-mask-image: url('../img/sub/mypage/caret-right.svg');
    mask-image: url('../img/sub/mypage/caret-right.svg');
}

.svg-icon.grad-cap {
    -webkit-mask-image: url('../img/sub/mypage/grad-cap.svg');
    mask-image: url('../img/sub/mypage/grad-cap.svg');
}

.svg-icon.full-screen {
    width: 20px;
    -webkit-mask-image: url('../img/sub/mypage/full-screen.svg');
    mask-image: url('../img/sub/mypage/full-screen.svg');
}

.svg-icon.open-up {
    width: 18px;
    -webkit-mask-image: url('../img/sub/mypage/open-up.svg');
    mask-image: url('../img/sub/mypage/open-up.svg');
}

.svg-icon.open-down {
    width: 18px;
    -webkit-mask-image: url('../img/sub/mypage/open-down.svg');
    mask-image: url('../img/sub/mypage/open-down.svg');
}

.svg-icon.note {
    width: 20px;
    -webkit-mask-image: url('../img/sub/mypage/note.svg');
    mask-image: url('../img/sub/mypage/note.svg');
}

.svg-icon.like {
    width: 20px;
    -webkit-mask-image: url('../img/sub/mypage/like.svg');
    mask-image: url('../img/sub/mypage/like.svg');
}

.svg-icon.liked {
    width: 20px;
    -webkit-mask-image: url('../img/sub/mypage/liked.svg');
    mask-image: url('../img/sub/mypage/liked.svg');
}

.svg-icon.clip {
    width: 16px;
    -webkit-mask-image: url('../img/sub/mypage/clip.svg');
    mask-image: url('../img/sub/mypage/clip.svg');
}

.svg-icon.list {
    -webkit-mask-image: url('../img/sub/mypage/list.svg');
    mask-image: url('../img/sub/mypage/list.svg');
    background-color: #fff;
}

.svg-icon.bookmark {
    -webkit-mask-image: url('../img/sub/mypage/bookmark.svg');
    mask-image: url('../img/sub/mypage/bookmark.svg');
}

.svg-icon.delete {
    background-color: #b0b0b0;
    width:16px;
    -webkit-mask-image: url('../img/sub/mypage/delete.svg');
    mask-image: url('../img/sub/mypage/delete.svg');
}

.svg-icon.screen-play {
    width: 16px;
    -webkit-mask-image: url('../img/sub/mypage/screen-play.svg');
    mask-image: url('../img/sub/mypage/screen-play.svg');
}

.svg-icon.guide {
    -webkit-mask-image: url('../img/sub/mypage/guide.svg');
    mask-image: url('../img/sub/mypage/guide.svg');
}

.svg-icon.book-alt {
    -webkit-mask-image: url('../img/sub/mypage/book-alt.svg');
    mask-image: url('../img/sub/mypage/book-alt.svg');
}

.svg-icon.time {
    -webkit-mask-image: url('../img/sub/mypage/time.svg');
    mask-image: url('../img/sub/mypage/time.svg');
}

.svg-icon.graduation-cap {
    -webkit-mask-image: url('../img/sub/mypage/graduation-cap.svg');
    mask-image: url('../img/sub/mypage/graduation-cap.svg');
}

.svg-icon.duration {
    -webkit-mask-image: url('../img/sub/mypage/duration.svg');
    mask-image: url('../img/sub/mypage/duration.svg');
}


.svg-icon.left {
    -webkit-mask-image: url('../img/sub/mypage/left.svg');
    mask-image: url('../img/sub/mypage/left.svg');
}

.svg-icon.right {
    -webkit-mask-image: url('../img/sub/mypage/right.svg');
    mask-image: url('../img/sub/mypage/right.svg');
}

.svg-icon.clock {
    -webkit-mask-image: url('../img/sub/mypage/clock.svg');
    mask-image: url('../img/sub/mypage/clock.svg');
}

.svg-icon.e-learning {
    -webkit-mask-image: url('../img/sub/mypage/e-learning.svg');
    mask-image: url('../img/sub/mypage/e-learning.svg');
}


/* 나의홈 */
.svg-icon.ai-assistant {
    -webkit-mask-image: url('../img/sub/mypage/ai-assistant.svg');
    mask-image: url('../img/sub/mypage/ai-assistant.svg');
}
.svg-icon.bars-progress {
    -webkit-mask-image: url('../img/sub/mypage/bars-progress.svg');
    mask-image: url('../img/sub/mypage/bars-progress.svg');
}
.svg-icon.time-fast {
    -webkit-mask-image: url('../img/sub/mypage/time-fast.svg');
    mask-image: url('../img/sub/mypage/time-fast.svg');
}
.svg-icon.hashtag {
    -webkit-mask-image: url('../img/sub/mypage/hashtag.svg');
    mask-image: url('../img/sub/mypage/hashtag.svg');
}

/* mypage title */
.subject-list_inner .mypage_title { 
    font-size: 18px; line-height: 1.6; word-break: keep-all; 
}
@media (min-width: 1025px) { 
    .br-1, .br-2 { display: none; } .br-3 { display: inline; } 
}
@media (max-width: 1024px) { 
    .subject-list_inner .mypage_title { font-size: 16px; } 
    .subject-list_inner .mypage_title .break { display: block; margin-top: 4px; } 
    .br-1, .br-2, .br-3 { display: inline; } 
}
@media (max-width: 768px) { 
    .subject-list_inner .mypage_title { font-size: 15px; } 
    .subject-list_inner .mypage_title .break { display: block; margin-top: 6px; } 
    .br-1, .br-2, .br-3, .br-4 { display: inline; } 
}



/* mypage custom_file */
.custom_file_type { display: flex; align-items: flex-start; font-size: 13px; color: #9e9e9e; position: relative;    padding-left: 20px;}
.custom_file-box { display: flex;  align-items: center; gap: 5px; margin-top: 8px; }
.custom_file-box .file-name {max-width: 500px; flex: 1; background: #f8f9fa; border: 1px solid #ddd; padding: 0 10px; font-size: 14px; color: #555; display: flex; align-items: center; justify-content: space-between; overflow: hidden; min-height: 36px; height: 36px; box-sizing: border-box; }
.custom_file-box .file-name .file-remove-inline { color: #000000; border: none; font-size: 15px; border-radius: 50%; cursor: pointer; background: none; font-weight: 600; margin-left: 8px; }
.custom_file-box .btn-file { background-color: #003678; color: #fff; border: 1px solid #fff; font-size: 14px; cursor: pointer; height: 36px; line-height: 34px; padding: 0 12px; box-sizing: border-box; }
.custom_file-box .btn-file:hover { background-color: #fff; color: #003678; border: 1px solid #003678; }
.custom_file_type span::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:16px;height:16px;background-color:#9e9e9e;-webkit-mask-image:url('../img/sub/mypage/exclamation.svg');-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;}

/* myclass_detail.html _simsa_&.php */
.status.title-group { display: block; font-size: 15px;color: #333 !important; margin-top: 5px; /* 제목과 간격 */}
.status.title-group strong { color: #065fd4; font-weight: bold;}
.status.title-group font { font-size: 13px; color: #555;display: inline-block;  margin-top: 3px;  }

@media screen and (max-width:768px){
    .con-section__title.title--sub {  display: flex; flex-direction: column; align-items: flex-start; }
    .con-section__title.title--sub { height:100px; }
    .con-section__title.title--sub .title,
    .con-section__title.title--sub .status.title-group { width: 100%; text-align: left; }
    .con-section__title.title--sub .status.title-group font { display: block; margin-top: 5px; }
}

@media screen and (max-width:500px){
    .con-section__title.title--sub { height:120px; }
}


/* myclass.html -> search_box */
.myclass_search_group {padding:20px 20px 0px 20px;}
.myclass_search_group .myclass_filter {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;width:100%;}
.myclass_search_group .myclass_filter_left {display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.myclass_search_group .myclass_period_buttons {display:flex;flex-wrap:wrap;gap:2px;}
.myclass_search_group .myclass_period_btn {flex:1 1 auto;min-width:80px;margin-right:-3px;padding:0 10px;height:43px;line-height:43px;color:#222;font-size:15px;background:#fff;border:1px solid #e5e5e5;cursor:pointer;transition:all 0.2s;}
.myclass_search_group .myclass_period_btn.on {background:#4576ff;color:#fff;border-color:#4576ff;}
.myclass_search_group .myclass_custom_period {display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.myclass_search_group .myclass_start_date,
.myclass_search_group .myclass_end_date {flex:1 1 100px;height:43px;border-radius:5px;border:1px solid #e5e5e5;background:#fff url(/img/sub/mypage/ico-calendar.png) no-repeat right 12px center;background-size:20px;box-sizing:border-box;padding:0 1.2rem;  cursor: default; background-color: #f5f5f5;}
.myclass_search_group .myclass_learning_state_buttons {display:flex;gap:10px;margin-top:20px;}
.myclass_search_group .myclass_learning_state_buttons .myclass_state_btn + .myclass_state_btn::before { content: ""; position: absolute;left: -6px; top: 50%; transform: translateY(-50%); width: 1px; height: 60%; background: #d7d7d7;}
.myclass_search_group .myclass_state_btn {position: relative;border:none;background:unset;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:15px;transition:0.2s;}
.myclass_search_group .myclass_state_btn.on {color:#4576ff;}
.myclass_search_group .myclass_state_btn button + button::before {content:"";position:absolute;left:-6px;top:50%;transform:translateY(-50%);width:1px;height:60%;background:#d7d7d7;}
.myclass_search_group .myclass_filter_right {display:flex;align-items:center;flex-wrap:wrap;}
.myclass_search_group .myclass_filter_right select {display:inline-block;outline:none;margin-right:10px;height:43px;border:1px solid #e5e5e5;padding:0 10px;color:#707070;font-size:14px;margin:0;}
.myclass_search_group .myclass_filter_right input {display:inline-block;outline:none;height:43px;margin:0;border:1px solid #e5e5e5;padding:0 50px 0 10px;width:200px;color:#707070;font-size:14px;float:left;border-radius:unset;}
.myclass_search_group .myclass_filter_right .myclass_search_button {border:none;height:43px;line-height:43px;background-color:#5d626e;width:100px;text-align:center;display:inline-block;color:#fff;font-size:14px;cursor:pointer;float:left;border-radius:0px 5px 5px 0px;}
.myclass_search_group .myclass_filter_right .myclass_search_option_select {width:130px;float:left;border-radius:5px 0px 0px 5px; margin-right: -1px}
@media(max-width:768px){
    .myclass_search_group .myclass_filter {flex-direction:column;align-items:stretch;}
    .myclass_search_group .myclass_filter_left,
    .myclass_search_group .myclass_custom_period,
    .myclass_search_group .myclass_filter_right {width:100%;}
    .myclass_search_group .myclass_period_buttons {width:100%;}
    .myclass_search_group .myclass_period_buttons .myclass_period_btn {flex:1;min-width:0;}
    .myclass_search_group .myclass_custom_period input,
    .myclass_search_group .myclass_search_option_select,
    .myclass_search_group .myclass_search_input,
    .myclass_search_group .myclass_filter_right .myclass_search_button {width:100%;margin-bottom:6px;}
    .myclass_search_group .myclass_filter_right .myclass_search_button {border-radius:0;}
    .myclass_search_group .myclass_filter_right {display:flex;gap:4px;justify-content:space-between;}
    .myclass_search_group .myclass_filter_right .myclass_search_option_select {flex:1 0 29%;max-width:30%;border-radius:5px; margin-right: unset}
    .myclass_search_group .myclass_filter_right .myclass_search_input {flex:0 0 70%;max-width:70%;border-radius:5px}
}


/* 나의홈 */
.history-item { padding:10px; border-bottom:1px solid #ebebeb;display:flex; flex-direction:column; gap:6px; font-size:14px; }
.history-item .history-info { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px; font-weight:500; }
.history-item .course-title { max-width:65%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.history-item .last-date { color:#666; font-size:13px; min-width:30%; text-align:right; }
.history-item .progress-info { display:flex; justify-content:space-between; flex-wrap:wrap; font-size:13px; color:#555; gap:6px; }
.history-item .progress-info i { height: 18px; vertical-align: bottom;}
.history-item .btn-study { display:inline-block; height:25px; line-height:25px; background:#4469e3; color:#fff; border-radius:4px; text-decoration:none; font-size:13px; width:100%; text-align:center; transition:background-color 0.3s; }
.history-item .btn-study:hover { background:#3651b5; }
.history-item .btn-study.end { background:#28a645; }
.history-item .btn-study.end:hover { background:#12812c; }
.con-section__title .title .title-note { font-size:12px;color:#666;margin-left:4px;}