/* .subpage_form { display:flex; padding-top:6rem; } 
.subpage { padding-top:14rem; margin-bottom:8rem; } 
.my_subpage { padding-top: 6rem; padding-bottom: 8rem; } 
.subp_title { padding:0 0 2rem 0; border-bottom:2px solid #1D1D1D; width:100%; } 
.subp_title h2 { font-size:3.2rem; font-weight:600; } 
.subp_title2 { margin-bottom:3rem; } 
.subp_title2 h3 { font-size:2.4rem; font-weight:600; } */
.btn-text.fc_secondary{color: #98A19F; cursor: pointer;}

.btn-outline-expired{border: 1px solid #DFDFDF; color: #98A19F;}

/* 모달 */
.modal-header2{padding-top: 6rem; padding-bottom: 2rem;}
.modal-title2{font-size: 2.4rem; text-align: left; border-bottom: 1px solid #E0E0E0; padding-bottom: 1.5rem;}


/* 마이페이지 */
.my_subpage { background:url("../img/subpage_bg.png") no-repeat top center; padding-top: 21rem; } 
.my_wr { display: flex; flex-flow: wrap; justify-content: space-between; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 2rem; } 

/* 마이페이지 왼쪽 */
.my_l { width: 100%; max-width: 25rem; position: relative; } 
.my_pg_tit { position: absolute; bottom: calc(100% + 3rem); left: 0; display: flex; align-items: center; font-size: 3rem; color: #fff; font-family: 'ONE-Mobile-Title'; } 
.my_pg_tit img { max-width: 3.5rem; margin-right: 1.5rem; } 
.my_l_cont { width: 100%; background: #fff; border-radius: 3rem; padding: 3rem; } 
.my_l_tit { font-size: 1.8rem; font-family: 'ONE-Mobile-Title'; padding-bottom: 1rem; border-bottom: 1px solid #E0E0E0; margin-bottom: 2rem; } 
.my_l_cont li { margin-bottom: 1.5rem; } 
.my_l_cont li:last-child { margin-bottom: 0; } 

/* 마이페이지 오른쪽 */
.my_r { width: 100%; max-width: 87rem; } 
.my_tab { display: flex; } 
.my_tab li { background: rgba(0,0,0,0.1); width: calc(100% / 6); border: 1px solid rgba(255,255,255,0.16); } 
.my_tab li:first-child { border-top-left-radius: 2rem; } 
.my_tab li:last-child { border-top-right-radius: 2rem; } 
.my_tab li a { color: rgba(255,255,255,0.8); display: block; width: 100%; height: 100%; padding: 2rem 0; text-align: center; font-size: 1.8rem; } 
.my_tab li.on { background: #fff; } 
.my_tab li.on a { color: var(--main); } 

.my_r_cont { width: 100%; background: #fff; border-bottom-left-radius: 3rem; border-bottom-right-radius: 3rem; box-shadow: 0 3px 20px rgba(56,167,139,0.16); padding: 5.5rem 5rem; } 
.my_r_tit { font-size: 2.4rem; font-family: 'ONE-Mobile-Title'; border-bottom: 1px solid #E0E0E0; padding-bottom: 1.5rem; } 
.my_r_tit2{font-size: 2rem; font-weight: 700;}
.my_profile { display: flex; align-items: center; margin-top: 3rem; } 
.my_profile .rect { width: 10rem; } 
.profile_btn { position: absolute; bottom: 0; right: 0; border-radius: 50%; width: 3.2rem; height: 3.2rem; box-shadow: 0 3px 6px rgba(0,0,0,0.16); background: #fff; } 
.profile_btn:focus { box-shadow: 0 3px 6px rgba(0,0,0,0.16) !important; } 
.my_id{font-size: 2rem; font-weight: 600; margin-top: 0.5rem;}
.lv_badge { font-family: 'ONE-Mobile-Title'; color: var(--main); padding:0.6rem 1rem; font-size:1.2rem; border-radius: 0.5rem; background: rgba(10,178,142,0.1); } 

.my_profile_txt { position: relative; margin-top: 2.5rem; height: 15rem; padding: 2rem; padding-bottom: 6rem; border: 1px solid #DFDFDF; border-radius: 2.5rem; } 
.my_profile_txt textarea { width: 100%; height: 100%; resize: none; border:0; } 
.my_profile_txt textarea::placeholder { color: #AEBAB7; } 
.my_profile_txt textarea:focus { outline: none; } 
.my_profile_txt .btn { position: absolute; right: 2rem; bottom: 2rem; } 

.badge_wr { margin-top: 4rem; margin-bottom: 1rem; } 
.badge_wr ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 3rem; } 
.badge_wr li { width: calc((100% - 12rem) / 5); margin-bottom: 3rem; } 
.cal_hit_p { width: 100%; height: 21rem; background: rgba(0,0,0,0.4); color: #fff; font-size: 1.6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } 

.ad_ban { width: 100%; max-width: 1240px; padding: 0 2rem; margin: 0 auto; height: 11rem; margin-top: 10rem; } 
.ad_ban a{display: block; width: 100%; height: 100%; background:url('../img/ad_ban.jpg') no-repeat; background-position: center; background-size: cover;  border-radius: 2rem;}


/* 내 포인트 */
.my_point{background: transparent linear-gradient(96deg, #17988D 0%, #4FB898 100%) 0% 0% no-repeat padding-box; border-radius: 2rem; padding: 3rem;  color: #fff; margin-top: 3rem; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; font-size: 1.8rem; font-weight: 500;}
.my_point span:first-child{opacity: 0.8;}
.my_point span:last-child{font-family: 'ONE-Mobile-Title'; text-align: right;}
.sub_list2 .cogo_table tr:last-child td{border-bottom: 2px solid #ECEFEE;}

/* 결제내역 */
.pay_cal{background: #ECEFEE; border-radius: 500px; width: 15rem; height: 3.8rem; display: flex; justify-content: center; align-items: center; color: #3A3939; border: 0;}
.pay_ul{margin-top: 2rem;}
.pay_ul li{border: 1px solid #ECEFEE; border-radius: 2rem; padding: 3rem; margin-bottom: 2rem;}
.pay_li_cont{display: flex; align-items: center; margin-top: 2rem;}
.pay_li_cont .rect{border-radius: 1.5rem; width: 19rem; margin-right: 3rem; flex-shrink: 0;}
.pay_li_cont .rect::after{padding-bottom: calc(130 / 190 * 100%);}
.pay_cate{position: absolute; top: 1rem; right: 1rem;  background: #E6F7F3; border-radius: 500px; color: var(--main); font-size: 1.2rem; padding: 0.5rem 1rem;}

/* 강의 */
.my_r_tit_bg{position: relative;}
.my_r_tit_bg::after{background: #fff url('../img/tit_bg.png')no-repeat; background-position: right bottom; background-size: 100%; position: absolute; bottom: 0; right: 0; display: block; content: ''; width: 9.6rem; height: 8.2rem;}
.lec_cate{background: #E6F7F3; border-radius: 500px; color: var(--main); padding: 0.5rem 1rem; }

.my_lecture{border: 1px solid #ECEFEE; padding: 3rem; border-radius: 2rem;}
.my_lec_txt{display: flex; margin-top: 1.5rem;}
.my_lec_txt p:nth-child(1){width: 8rem; color: #98A19F; font-weight: 500; flex-shrink: 0;}
.my_lec_ul{display: flex; flex-wrap: wrap; margin: 0 -1.5rem; margin-top: 2rem;}
.my_lec_ul li{padding: 0 1.5rem; width: 33.3333%; margin-bottom: 2rem;}
.my_lec_a .rect{border-radius: 1.5rem;}
.my_lec_a .rect::after{padding-bottom: calc(209/236*100%);}
.play_btn{position: absolute; font-size: 8rem; color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; width: 100%; height: 100%;}
.play_btn:hover{color: #fff;}

/* 소속그룹 */
.group_bg{width: 17rem; margin: 0 auto; margin-top: 6rem; margin-bottom: 2rem;}
.group_tit{font-size: 1.8rem; font-weight: 600; text-align: center; margin-bottom: 3rem;}
.group_box{background: transparent linear-gradient(96deg, #17988D 0%, #4FB898 100%) 0% 0% no-repeat padding-box; border-radius: 2rem; padding: 3rem;  color: #fff; margin-top: 3rem; margin-bottom: 2rem; font-size: 1.8rem; font-weight: 500;}
.group_tit2{font-size: 2rem; font-family: 'ONE-Mobile-Title'; margin-bottom: 1rem;}
.group_tag{padding: 0.5rem 1.5rem; background: rgba(0,0,0,0.1); border-radius: 0.8rem; margin-right: 1rem;}
.group_bg2{margin-top: 7rem; display: flex; justify-content: flex-end;}
.group_bg2 img{width: 12.3rem;}

/* 내수업 */
.my_r_cont2{border-top-right-radius: 3rem;}
.my_r_tit_bg2{position: relative;}
.my_r_tit_bg2::after{background: #fff url('../img/tit_bg2.png')no-repeat; background-position: right bottom; background-size: 100%; position: absolute; bottom: 0; right: 0; display: block; content: ''; width: 9.6rem; height: 8.2rem;}
.my_homework_none{margin: 10rem 0; display: flex; flex-flow: column; justify-content: center; align-items: center;}
.my_homework_none img{width: 6.5rem;}

/* 내 코드 보기 */
.sub_list3 .cogo_table tr:last-child td{border-bottom: 0;}
.my_code{background: #FAFAFA; padding-bottom: 3.5rem; border-bottom: 1px solid #AEBAB7;}

/* 상태 */
.alert_modal{background: #fff; border-radius: 1.5rem; padding: 1.7rem 3rem; box-shadow: 0 6px 20px rgba(0,0,0,0.16); position: fixed; top: 11rem; left: 50%; transform: translateX(-50%); display: flex; justify-content: space-between; align-items: center; width: calc(100% - 2rem); max-width: 50rem; z-index: 99999;}
.rank_profile{width: 2.8rem; margin-right: 1rem;}

/* 강의 */
.lecture_ul{display: flex; margin: 0 -2.5rem; flex-wrap: wrap;}
.lecture_ul li{width: calc(100% / 4); padding: 0 2.5rem; margin-bottom: 3rem;}
.lecture_cont .rect{border-radius: 1.5rem;}
.lecture_cont .rect::after{padding-bottom: calc(180 / 262.5 * 100%);}

/*강의 상세*/
.lecture_cont1{display: flex; justify-content: space-between; margin-bottom: 5rem;}
.lecture_img{width: 50%;}
.lecture_cont1 .rect{border-radius: 3rem;}
.lecture_cont1 .rect::after{padding-bottom: 66.66667%;}
.lecture_info{width:calc(50% - 80px);}

.lecture_cate{background: #E6F7F3; border-radius: 500px; color: var(--main); display: inline-block; padding: 0.55rem 1.5rem;}
.lecture_tit{font-size: 2.6rem; font-weight: 700; margin: 1rem 0;}
.lecture_name{font-size: 1.6rem; font-weight: 500;}
.lecture_price{font-size: 2.4rem; font-family: 'ONE-Mobile-Title'; color: var(--main); margin-top: 3.5rem; }
.lecture_period{font-size: 1.4rem; font-weight: 300; color: #98A19F;}
.lecture_des{padding: 2rem 0; border-top: 1px solid #E6E8E8; border-bottom: 1px solid #E6E8E8; margin-bottom: 2rem; margin-top: 1.5rem;}
.level_collapse .my_r_tit2{font-size: 2.2rem; font-weight: 700;}
.lecture_detail_b{display: flex; justify-content: space-between;}
.lecture_detail_b .accordion{width: calc(77% - 2.5rem);}
.lecture_detail_b .buy_box{width: calc(23% - 2.5rem);}
.buy_box>div{ border-radius: 3rem; background: #fff; box-shadow: 0 8px 25px rgba(56,167,139,0.15); padding: 3rem; position: sticky; top: 12rem;}

/* 상점 상세 */
.store_price{margin-top: 3rem;}
.store_des{display: flex; margin-bottom: 1.5rem;}
.store_des span:first-child{width: 7rem; font-weight: 500; color: #98A19F;}
.store_img .rect::after{padding-bottom: 100%;}

/* 상점 */
.store_ol_btn{display: flex; padding: 0 2rem !important; border-right: 1px solid #DBDBDB; border-radius: 0;}
.store_ol_btn:first-child{padding-left: 0 !important;}
.store_ol_btn:last-child{border-right: 0;}
.store_ol_btn i{display: none; margin-right: 0.5rem;}
.store_ol_btn.on i{display: block;}
.store_ol_btn.on span{font-weight: 500;}
.store_ul{border-top: 2px solid #E8E8E8; padding-top: 3rem;}

/* 강의 구매 완료 */
.lecture_com_pg{padding: 4.5rem 8rem; border-bottom: 1px dashed #E0E0E0; z-index: 1;}
.lecture_com_pg2{box-shadow: none; z-index: 2;}
.lecture_com{font-size: 3rem; font-family: 'ONE-Mobile-Title'; margin-top: 2rem; text-align: center;}

/* 구매하기 */
.pay_li_cont2 .rect{width: 15rem;}
.pay_li_cont2 .rect::after{padding-bottom: 100%;}
.alert_modal2{max-width: 60rem;}







/*반응형 max 1200 xl*/
@media (max-width: 1199.98px) {

    /* 마이페이지 */
    .my_subpage { padding-top: 14rem; } 
    .my_pg_tit{font-size: 2.5rem; bottom: calc(100% + 2rem); left: 2rem;}
    .my_pg_tit img{width: 3rem; margin-right: 1rem;}
    .my_wr { flex-flow: column; align-items: center; padding: 0;} 
    .my_l { margin-bottom: 3rem; max-width: 87rem; padding: 0 2rem;} 


    .my_r{padding: 0 2rem;}
    .my_r_cont {padding: 3.5rem 3rem; } 
    .my_r_tit{font-size: 2.2rem;}
    .my_profile .rect{width: 8rem;}
    .my_id{font-size: 1.8rem;}

    .alert_modal{top: 8rem;}

    /* 강의 상세 */
    .lecture_info {width: calc(50% - 40px);}
    .lecture_detail_b .accordion{width: 100%;}
    .lecture_detail_b .buy_box{display: none;}
 }


/*반응형 max 992px lg*/
@media (max-width: 991.98px) {
    /* 마이페이지 */
    .badge_wr li { width: calc((100% - 9rem) / 4); margin-bottom: 3rem; } 

    /* 강의 */
    .lecture_ul{margin: 0 -2rem;}
    .lecture_ul li{width: calc(100% / 3); padding: 0 2rem; margin-bottom: 2rem;}

    /*강의 상세*/
    .lecture_cont1{flex-flow: column; margin-bottom: 3rem;}
    .lecture_img{width: 100%; margin-bottom: 3rem;}
    .lecture_info{width: 100%;}

 } 


/*반응형 max 767px md*/
@media (max-width: 767.98px) { 
    /* 마이페이지 */
    .my_subpage { padding-top: 13rem; padding-bottom: 5rem;} 
    .my_pg_tit{font-size: 1.8rem; bottom: calc(100% + 1.5rem);}
    .my_l_cont{border-radius: 2rem; padding: 2rem;}
    .my_l_tit{font-size: 1.6rem;}
    .my_tab{overflow-x: scroll;}
    .my_tab li{min-width: 11rem;}
    .my_tab li a{padding: 1.5rem 1rem; white-space: nowrap; font-size: 1.6rem;}

    .my_r{padding: 0;}
    .my_r_cont { border-bottom-left-radius: 2rem; border-bottom-right-radius: 2rem; padding: 2.5rem 2rem; } 
    .my_r_tit{font-size: 2rem;}
    .my_r_tit2{font-size: 1.8rem;}
    .my_profile{margin-top: 2rem;}
    .my_profile_txt{border-radius: 1.5rem; padding-bottom: 5rem;}
    .my_profile_txt .btn{bottom: 1rem; right: 1rem;}
    .badge_wr li { width: calc((100% - 6rem) / 4); margin-bottom: 2rem;} 

    .ad_ban{margin-top: 5rem; border-radius: 1rem;}

    /* 강의 */
    .my_r_tit_bg::after{width: 6.9rem; height: 5.8rem;}
    .my_lec_ul li{width: 50%;}
    .down_btn{background: transparent !important; border: none !important; color: var(--secondary) !important; padding: 0 !important; height: auto !important;}

    /* 소속그룹 */
    .group_box{padding: 2rem;}
    .group_tit2{font-size: 1.8rem;}

    /* 내수업 */
    .my_r_tit_bg2::after{width: 6.9rem; height: 5.8rem;}
    .my_homework_none{margin: 5rem 0 3rem;}

    /* 강의 */
    .lecture_ul li{width: calc(100% / 2);}

    /* 강의 상세 */
    .lecture_cont1 .rect{border-radius: 2rem;}
    .lecture_tit{margin: 0.5rem 0 2rem; font-size: 2rem;}
    .lecture_price{font-size: 2rem; margin-top: 3rem;}

    /* 강의 구매 완료 */
    .lecture_com{font-size: 2.4rem;}
    .lecture_com_pg{padding: 2rem;}
    .lecture_com_pg2{border-radius: 0; padding-bottom: 5rem;}
} 

/*모바일 반응형 max 576px sm*/
@media (max-width: 575.98px) {
    /* 모달 */
    .modal-header2{padding: 2rem;}
    .modal-title2{font-size: 2rem;}
    .modal2 .modal-content{border-radius: 2rem;}
    .modal2 .modal-body{padding: 0 2rem;}

    /* 마이페이지 */
    .my_tab li a{padding: 1rem;}
    .badge_wr li { width: calc((100% - 3rem) / 3); } 
    .my_point{font-size: 1.4rem; padding: 2rem;}

    /* 결제내역 */
    .pay_ul li{padding: 2rem;}
    .pay_li_cont{flex-flow: column; align-items: flex-start;}
    .pay_li_cont .rect{border-radius: 1rem; width: 100%; margin-right: 0; flex-shrink: 0; margin-bottom: 2rem;}
    .pay_li_cont .fs_18{font-size: 1.6rem;}
    .pay_li_cont .fs_16{font-size: 1.5rem;}
    .w-sm-100{width: 100% !important;}

    /* 강의 */
    .my_lecture{padding: 2rem;}
    .my_lec_txt{margin-top: 1rem;}
    .my_lec_ul li{width: 100%;}
    .my_lec_a .rect::after {padding-bottom: calc(209 / 234 * 70%);}

    /* 소속그룹 */
    .group_bg{width: 12rem;}
    .group_tit{font-size: 1.6rem;}
    .group_tit2{font-size: 1.6rem;}
 } 

@media (max-width:380px) { 
    .my_point{padding: 2rem; border-radius: 1.5rem;}

    /* 강의 */
    .lecture_ul li{width: calc(100% / 1);}
    
    /* 상점 */
    .store_ol_btn{padding: 0 1rem !important;}
}