@charset "utf-8";
/* CSS Document */
/* 일부 페이지에 사용하는 클래스 모음 */
/* btn-* 버튼 구분용 클래스 */
/* Mobile Device */
@media (max-width : 767px) {
/* M 마이페이지 메인
-----------------------------------------------------------------------------------------------------------------------------------------*/
.mpgOutlines { display: grid; gap: 2px; grid-template-columns: 1fr; padding: 0 var(--m-gap); }
.mpgPre { margin-top: 60px; }
.mpgPre .link-in { font-weight: 400; }
.mpgUser { display: flex; flex-wrap: wrap; gap: 0 10px; justify-content: space-between; align-items: center; align-content: center; position: relative; overflow: hidden; border-radius: var(--radius-out); padding: 8px 20px; }
.mpgUser:before { content: " "; position: absolute; inset: 0; background-color: var(--color-theme); opacity: 0.1; z-index: 0; }
.mpgUser > div { flex: 0 0 auto; position: relative; z-index: 1; }
.mpgUser_name { font-size: var(--font-l); color: var(--color-emp-bk); }
.mpgInfos { display: grid; grid-template-columns: repeat( auto-fit, minmax( 140px, auto)); flex-wrap: wrap; gap: 2px; }
.mpgInfo { flex-basis: 120px; display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; background-color: var(--color-bg01); border-radius: var(--radius-out); }
.mpginfo_sbj { font-size: var(--font-s); line-height: 100%; }
.mpginfo_val { display: flex; gap: 4px; font-size: var(--font-l); color: var(--color-emp-bk); font-weight: 600; line-height: 100%; }
.mpginfo_link { text-decoration: none; color: var(--color-theme); }
.mpginfo_link:hover { text-decoration: underline; }
.brdprelfin { border-color: var(--color-line); }
.brdprelfin .item_name { font-weight: 500; color: var(--color-normal); }
.brdprelfin .item_tech { font-weight: 400; color: var(--color-normal); }
/* M 수강중인 강좌
-----------------------------------------------------------------------------------------------------------------------------------------*/
/* M 수강중인 강좌 리스트 */
.brdling > .hbrd_th { display: none; }
.brdling > .hbrd_td { background-color: #FFFFFF; }
.brdling_stm:before { content: "수강시작"; }
.brdling_ltm:before { content: "남은기간"; }
/* M 수강중인 강좌 - 일시정지 */
.lecpause { margin-top: 20px; max-width: 600px; width: 100%; font-size: var(--font-s); font-weight: 400; border-radius: var(--radius-out); border: 1px solid var(--color-line); }
.lecpause_sum::-webkit-details-marker { display: none; }
.lecpause_sum { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 14px; cursor: pointer; background-color: var(--color-bg01); }
.lecpause_sum:after { content: " "; border: 6px solid transparent; border-bottom: none; border-top: 10px solid var(--color-unfocus); transition: 0.3s; }
.lecpause[open] .lecpause_sum:after { transform: rotateZ(180deg); }
.lecpause_title { margin: 0; }
.brdlecpause { grid-template-columns: auto 1fr 1fr; }
.brdlecpause > .hbrd2_th { padding: 14px 8px; }
.brdlecpause > .hbrd2_td { padding: 8px; }
.brdlecpause > .brd_mrg { border-bottom: 1px dashed var(--color-line); }
.lecpause_func { padding: 16px; text-align: center; }
.lecrst_mrg { grid-column: 1 / none; }
.lecpause_endup { color: var(--color-theme); font-weight: 700; }
.lecpause_expired { color: var(--color-unfocus); }
/* M 수강종료 강좌
-----------------------------------------------------------------------------------------------------------------------------------------*/
/* M 수강종료 강좌 리스트 */
/* M 메모 */
.mylmemo { border-top: 1px solid var(--color-theme); border-bottom: 1px dashed var(--color-line); padding: var(--m-gap); line-height: 160%; word-wrap: break-word; word-break: keep-all; }
.myltrace + .brd_mrg { border-top: 1px solid var(--color-theme); border-bottom: 1px dashed var(--color-line); }
/* M 수강이력 */
.brdlflogall { border-top: 1px solid var(--color-theme); border-bottom: 1px dashed var(--color-line); padding: var(--m-gap); }
.lflog { border-radius: var(--radius-out); border: 1px solid var(--color-line); transition: 0.3s; overflow: hidden; }
.lflog + .lflog { margin-top: var(--m-gap); }
.lflog_sum::-webkit-details-marker { display: none; }
.lflog_sum { display: flex; justify-content: space-between; align-items: center; padding: 10px; line-height: 130%; cursor: pointer; background-color: var(--color-bg01); }
.lflog_sum:after { content: " "; border: 6px solid transparent; border-bottom: none; border-top: 10px solid var(--color-unfocus); transition: 0.3s; }
.lflog[open] .lflog_sum:after { transform: rotateZ(180deg); }
.lflog_title { margin: 0 10px 0 0; font-size: 15px; font-weight: 600; word-wrap: break-word; word-break: keep-all; }
/* M 수강이력 - 테이블 */
.brdlflog { grid-template-columns: repeat( 3, auto); }
.brdlflog.brdlfnocert > .brd_br { grid-column: 1 / 4; }
.brdlflog.brdlfcert { grid-template-columns: repeat( 5, auto); }
.brdlflog > .brd_br:last-child { display: none; }
.brdlflog > .brd_mrg { border-bottom: none; }
.brdlflog_mintime,
.brdlflog_cert { display: none; }
.brdlflog.brdlfcert .brdlflog_mintime,
.brdlflog.brdlfcert .brdlflog_cert { display: flex; justify-content: center; align-items: center; }
.brdlflog > .hbrd2_th { padding: 10px 6px; }
.brdlflog > .hbrd2_td { padding: 10px 6px; }
.mylflog_cert { text-align: right; }
.brdlflog_mrg { padding: 10px 8px; }
/* M 시험 리스트 */
.lfexl { grid-auto-flow: dense; }
.lfexl_score .brd_val { color: var(--color-theme); }
/* M 시험상세 */
.lfexname { margin: var(--m-gap); margin-top: 0; padding: var(--m-gap); border-radius: var(--radius-out); background-color: var(--color-bg01); }
.lfexname .brdcap_r { flex: 1 0 100%; }
.lfexsum { display: flex; flex-wrap: wrap; gap: 1px; align-items: stretch; overflow: hidden; border-radius: var(--radius-out); border: 1px solid var(--color-line); margin: var(--m-gap); margin-bottom: 40px; padding: 0; background-color: var(--color-line); }
.lfexsum .brd_col { flex: 1 1 300px; display: flex; align-items: stretch; gap: 0; margin: 0; padding: 0; text-align: left; background-color: var(--color-emp-wt); }
.lfexsum .brd_dt { flex: 0 0 110px; display: flex; align-items: center; }
.lfexsum .brd_dd { flex: 1 1; }
.brdlfscore .brd_sbj { flex-basis: 3.4em; }
/* M 퀴즈 */
.lfqzl { grid-auto-flow: dense; }
.lfqzl_name.brd_title { grid-row: 2; padding-top: 0; }
.lfqzl_curr.brd_col { grid-row: 1; }
.lfqzl_curr .brd_sbj { display: none; }
.lfqzl_score .brd_val { color: var(--color-theme); }
.lfqzl_nottake.brd_col .brd_val { color: var(--color-theme); }
.lfqzl_nottake.brd_btns {color: var(--color-unfocus); font-weight: 400; }
.lfqzl_nottake.brd_btns .brd_val { display: none; }
/* M 과제 숙제 */
.lfhwl { grid-auto-flow: dense; }
.lfhwl_score .brd_val { color: var(--color-theme); }
.lfhwl_nottake.brd_col .brd_val { color: var(--color-unfocus); font-weight: 400; }
.lfhwl_nottake.brd_btns { padding-top: 0; }
.lfhwl_nottake.brd_btns .brd_val { display: none; }
/* M 장바구니, 구매
-----------------------------------------------------------------------------------------------------------------------------------------*/
/* M 장바구니, 장바구니 결제, 주문상세, 연장상세 공통 */
.odgrid { display: grid; grid-template-columns: 100%; grid-column-gap: 40px; }
.odgrid_l { display: grid; gap: 40px; }
.odgrid_r { margin-top: 40px; }
/* M 장바구니, 결제 공통 */
.brdmyct { border-top: 1px solid var(--color-theme); }
.brdmyct .prdbx { border-bottom: 1px dashed var(--color-line); padding: var(--m-gap); }
.brdmyct .prdbx_u.itemqtt { flex: 0 0 auto; display: flex; align-items: center; }
.brdmyct_empt { border-bottom: 1px dashed var(--color-line); padding : var(--m-gap); text-align: center; }
.myctbtn { padding: 0 20px;}
/* M 장바구니 - step01 */
.myct01 .odgrid_l { gap: 0; }
.myct01 .odgrid_r { position: sticky; left: 0; right: 0; bottom: 0px; }
.myct01 .vsum_tit { display: none; }
.myct01 .vsum_total { border: none; margin: 0; padding: 0; }
.myct01 .vsum_btn { margin-top: 10px; }
/* M 장바구니 - step02 - 결제 */
.brdmyctpay { border-top: 1px solid var(--color-theme); }
.brdmyctpay .prdbx { display: grid; align-items: center; grid-template-areas: "name btn" "qtt btn"; grid-template-columns: 1fr 60px; grid-row-gap: 0; border-bottom: 1px dashed var(--color-line); padding: var(--m-gap); }
.brdmyctpay .thumb { display: none; margin: 0; padding: 0; }
.brdmyctpay .itemqtt { grid-area: qtt; padding-top: 10px; }
.brdmyctpay .itemqtt:after { content: " 구매"; }
.brdmyctpay .itemcpn { grid-area: btn; text-align: center; }
.itemcpn_prc { margin: 0; padding: 0; }
.itemcpn_btn { margin: 0; padding: 0; }
.brdctadd { padding-top: var(--m-gap); }
.brdctadd .vbrd_th { padding: 0 var(--m-gap) 10px; }
.brdctadd .vbrd_td { padding: 0 var(--m-gap); }
.mdbx .brdctadd .vbrd_th { padding: 0 10px; }
.mdbx .brdctadd .vbrd_td { padding: 0 10px; }
.brdctadd .vbrd_td { padding: 0 var(--m-gap); }
.brdctadd .brd_br { margin: var(--m-gap) 0; }
.brdctadd .brd_br:last-child { margin-bottom: 0; }
.brdctdsc { grid-template-columns: minmax( 4em, 8em ) 1fr; }
.myadif { display: grid; grid-template-areas: "add sum" "dsc sum" "pay sum"; grid-template-columns: 1fr minmax( 240px, 270px ); gap: 0 50px; margin-top: 100px; }
/* M 장바구니 - step02 - 결제 - 쿠폰 */
.cpnuse_emp { display: flex; justify-content: center; align-items: center; height: 160px; background-color: var(--color-bg02); font-size: 14px; }
/* M 장바구니 - step02 - 결제 - 적립금 */
.reward_noti { margin: 8px 0 4px; padding: 0; color: var(--color-theme); }
.reward_use + .reward_terms { margin-top: 10px; }
.reward_terms .vul_li:not(.vul_important):before { content: "\2219"; padding-right: 4px; }
/* M 장바구니 - step02 - 결제 - 결제수단 */
.paymts { list-style: none; display: grid; grid-template-columns: repeat( auto-fit, minmax( 10em, auto)); gap: 4px; border-top: 1px solid var(--color-devided); margin: 0; padding: var(--m-gap); padding-bottom: 0; }
.paymts_li { margin: 0; padding: 0; }
.paybanks { border: 1px solid var(--color-theme); ; margin: var(--m-gap); margin-top: 5px; padding: 15px; }
.depositTime { padding-right: 10px; font-size: 0.9em; color: var(--color-theme); font-weight: 600; }
.getFree { font-weight: 400; color: var(--color-theme); text-align: center; }
/* M 장바구니 - step03 - 주문 완료 */
.oddone { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; border-top: 1px solid var(--color-theme); border-bottom: 1px dashed var(--color-line); margin: 20px 0; padding: 20px; height: 40vh; min-height: 200px; text-align: center; word-break: keep-all; word-wrap: break-word; }
/* M 주문 배송 조회
-----------------------------------------------------------------------------------------------------------------------------------------*/
/* M 주문목록 */
.brdmyod { display: grid; grid-template-columns: 100%; gap: var(--m-gap); padding: 0 var(--m-gap); }
.odhstr_link { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; }
/* M 주문 상세 - 연장상세 공통 */
.odbrf { position: relative; overflow: hidden; grid-template-columns: 5em 1fr; gap: 0px 1em; margin: var(--m-gap); padding: 14px; font-size: var(--font-m); }
.odbrf:before { content: " "; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: var(--color-theme); opacity: 0.1; z-index: 0; }
.odbrf .brf_u:first-child { grid-row: span 3; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1; }
.odbrf_cancel:before { background-color: var(--color-unfocus); }
.odbrf_cancel .t-sbjv { color: var(--color-unfocus); }
.brdoddt { border-top: 1px solid var(--color-devided); padding-top: 20px; }
.oddtprd { flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px dashed var(--color-line); margin-bottom: 16px; padding: 0 var(--m-gap) 16px; }
.oddtprd:last-child { margin-bottom: 0px; }
.odstat { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
.odstat_stnb { color: var(--color-theme); }
.odstat_done { color: var(--color-emp-bk); }
.odstat_cancel { color: var(--color-unfocus); }
/* m주문 상세 - 배송안내 */
.parcel { flex: 1 1 100%; display: flex; gap: 4px; justify-content: space-between; align-items: center; ; padding: calc( var(--m-gap) / 2 ); background-color: var(--color-bg01); }
.parcel_infos { display: flex; gap: 4px; align-items: center; margin: 0; padding: 0; list-style: none; font-size: var(--font-s); }
.parcel_info { margin: 0; padding: 0; }
.parcel_detail { }
/* m주문 상세 - 배송정보 */
.brdodinfo { grid-template-columns: 9em 1fr; }
.brdodinfo + .btnbx { margin: 10px 0 20px 0; }
/* M 스크랩 */
.brdscript .hprdbx { flex-direction: column; }
.brdscript_check { grid-row: 1; text-align: right; }
.brdscript_check .brd_sbj { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }
.brdscript .brd_title { grid-row: 2; }
/* M 정기결제
-----------------------------------------------------------------------------------------------------------------------------------------*/
.brdlsubs {}
.brdlsubs_canclled { margin: 0; padding: 0; text-align: center; }
/* M 보유머니
-----------------------------------------------------------------------------------------------------------------------------------------*/
/* M 적립금 */
.brdmg .brd_sbj { flex-basis: 2em; }
.brdmg_date { grid-row: 1; }
.brdmg_date .brd_sbj { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }
.brdmg .brd_title { grid-row: 2; }
.brdmg_mgs .brdmg_plus { font-weight: 500; color: var(--color-theme); }
.brdmg_adms { display: flex; gap: 10px; align-items: center; }
.brdmg_adm { flex: 0 auto; }
.brdmg_note { position: relative; font-weight: 500; }
.brdmg_note:before { content: ""; position: absolute; inset: 0; background-color: var(--color-theme); opacity: .1; }
/* M 수강권 */
.brdcpn { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, auto)); gap: 10px; align-items: stretch; border-top: 1px solid var(--color-theme); border-bottom: 1px dashed var(--color-line); padding: var(--m-gap); }
.cpnrbx { padding: var(--m-gap); background-color: var(--color-bg01); }
.cpnr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.cpnr > .ip-txt { flex: 1 1; min-width: 3em; }
.cpnr > .mybtn { flex: 0 0 100%; }
/* M 할인권 */
.brdtk { margin-top: 20px; }
/* M 회원정보
-----------------------------------------------------------------------------------------------------------------------------------------*/
.brdmyqna { box-sizing: border-box; padding: var(--m-gap); width: 100%; overflow-x: scroll; }
/* M 회원정보
-----------------------------------------------------------------------------------------------------------------------------------------*/
/* 회원정보 로그인 */
.myVRFS { padding-bottom: 14vh; }
.myVRFS .t-h2 { text-align: center; }
.myVRF { display: flex; flex-direction: column; gap: 20px; margin: var(--m-gap); text-align: center; }
.myVRF_noti > p { display: inline; font-size: var(--font-m); font-weight: 500; word-break: keep-all; word-wrap: break-word; }
.myVRF_noti > p:last-child { display: block; }
.myVRF_help { font-size: var(--font-l); color: var(--theme-emp-color); }
.brdmymf_val,
.vrfbx_des { margin: 0px; }
.vrfbx_des + .vrfbx_des { margin-top: 4px; }
.brdmymf { padding-top: var(--m-gap); }
.brdmymf .vbrd_th { padding: 0 var(--m-gap) 10px; }
.brdmymf .vbrd_td { padding: 0 var(--m-gap); }
.brdmymf .brd_br { margin: var(--m-gap) 0; }
.brdmymf_tel { display: flex; align-items: center; gap: 2px; }
.brdmymf_tel .ip-txt { flex: 1 1; max-width: 30%; }
.brdmymf_tel .ip-sel { flex: 1 1; max-width: 30%; }
.brdmymf_iptext2 { width: 100%; }
.brdmymf_iptext2 .hul_li { flex: 1 1 100%; }
.brdmymf_iptext2 .ip-txt { width: initial; max-width: 100%; }
.brdmymf_iptext3 { width: 100%; }
.brdmymf_noti { margin-top: 4px; color: var(--color-theme); font-weight: 500; }
.brdmymf_desc { margin-top: 4px; }
/* M 회원 탈퇴 */
.myleave .btn-leave { flex: 1; }
.myleave .btn-cancle { flex: 1; }
/* M 등록 기기 관리
-----------------------------------------------------------------------------------------------------------------------------------------*/
.mydvsum { display: grid; grid-template-columns: 100%; border-radius: var(--radius-out); margin: var(--m-gap); padding: var(--m-gap); background-color: var(--color-bg01); word-wrap: break-word; word-break: keep-all; }
.mydvsum_sbj { font-size: var(--font-s); font-weight: 400; }
.mydvsum_val { margin: 0; }
.mydvsum_val > .t-val,
.mydvsum_val > .t-unit { font-weight: 600; }
.mydvsum_val + .mydvsum_sbj { margin-top: 18px; }
.mydvbx + .mydvbx { margin-top: 60px; }
.brdmydv_name .brd_val { font-size: 1.1em; font-weight: 600; }
.brdmydv_id { margin-top: 6px; font-size: .8em; font-weight: 400; line-height: 120%; }
/* M 수료증 관리
-----------------------------------------------------------------------------------------------------------------------------------------*/
.brdcert .item_tech { color: var(--color-normal); font-weight: 400; }
.cert_done { color: var(--color-theme); font-weight: 500; }
.cert_more { padding-right: 10px; color: var(--color-emp-bk); }
.cert_cancle { color: var(--color-normal); }
.cert_conditions { display: flex; flex-wrap: wrap; gap: 0 .6em; font-size: var(--font-s); color: var(--color-unfocus); }
/* M 멤버스
-----------------------------------------------------------------------------------------------------------------------------------------*/
/* M 공통 */
.mbs { min-height: 80vh; }
.mbs > article { flex: 1; }
.mbsBXs { display: flex; flex-direction: column; gap: 20px; margin: 30px var(--m-gap); font-size: 14px; word-break: keep-all; word-wrap: break-word; }
.mbsBX { margin: 0; padding: 0; list-style: none; }
.mbsBX input { position: relative; display: flex; align-items: center; margin: 0; padding: 16px; width: 100%; height: 50px; outline-offset: -1px; font-size: var(--font-m); font-weight: 400; }
.mbsBX_func { display: flex; flex-direction: column; margin: 0; padding: 0; }
.mbsBX_ips input:focus { outline-offset: -1px; }
.mbsBX_ips:first-child > input { border-radius: var(--radius-out) var(--radius-out) 0 0; }
.mbsBX_ips:last-child > input { border-radius: 0 0 var(--radius-out) var(--radius-out); border-top: none; }
.mbsBX_noti { border-radius: var(--radius-out); padding: 24px 20px; background-color: var(--color-bg01); font-size: var(--font-s); }
.mbsBX_noti h3 { text-align: center; }
.mbsBX_noti > p + p { margin-top: 10px; }
.mbsBX_help { display: flex; justify-content: center; }
.mbsBX_link { padding: 0 20px; text-decoration: none; color: var(--color-normal); line-height: 100%; }
.mbsBX_link[href="member_join.php"] { color: var(--color-theme); font-weight: 600; }
.mbsBX_link + .mbsBX_link { border-left: 1px solid var(--color-line); }
.findTabs { display: flex; flex-direction: row; align-items: flex-end; gap: 0;text-align: center; }
.findTab { flex: 1 1 200px; display: flex; justify-content: center; align-items: center; height: 50px; border: 1px solid var(--color-bg02); border-bottom-color: var(--color-line); background-color: var(--color-bg02); font-size: var(--font-l); font-weight: 400; line-height: 40%; color: var(--color-unfocus); cursor: pointer; text-decoration: none; }
.findTabOn { border-radius: var(--radius-out) var(--radius-out) 0 0; border: 1px solid var(--color-line); border-bottom-color: var(--color-emp-wt); background-color: var(--color-emp-wt); font-weight: 600; color: var(--color-normal); }
.findTabs + .t-h2 { margin-top: 30px; }
/* M 로그인 */
.mbsLogin { display: flex; justify-content: center; align-items: center; text-align: center; }
.mbsBX .loginBx_actn_sb { border: none; font-size: 20px; }
.loginSns { display: flex; justify-content: center; align-items: center; margin-top: 60px; padding: 20px 0; border-top: 1px dashed var(--color-line); border-bottom: 1px dashed var(--color-line); }
/* M 로그인 임시 제한 */
.mbsBlock { display: flex; justify-content: center; align-items: center; text-align: center; }
/* M 아이디 비밀번호 찾기 */
.mbsFind { display: flex; justify-content: center; align-items: center; text-align: center; }
.findBx_desc { font-size: var(--font-m); }
.findBx { min-height: 320px; }
#fPW .findBx_func_name { border-top: none; border-radius: 0; }
/* M 회원가입 */
.mbsJoin { margin: auto; padding: 20px 0 40px 0; }
.mbsJoin .t-h2 { text-align: center; }
.mbsJoin .mysteps { justify-content: center; border-top: 1px dashed var(--color-line); border-bottom: 1px dashed var(--color-line); padding: 20px; }
.joinBXs > .t-h3 { padding: 0 var(--m-gap); }
.joinBX { display: flex; flex-direction: column; gap: 20px; margin: 20px auto 40px; border-top: 1px solid var(--color-devided); }
.joinBX_head { display: flex; justify-content: space-between; align-items: center; font-size: var(--font-m); }
.joinBX_head > a { display: flex; justify-content: space-between; font-size: var(--font-m); }
.joinBX_reqY:before { content: "(필수)"; padding-right: 4px; font-weight: 600; }
.joinBX_docs { margin: 20px 0 40px; }
.joinBX_doc { overflow-y: scroll; border-radius: var(--radius-out); padding: 20px; height: 170px; background: var(--color-bg01); }
.joinBX_agr { padding: 0 var(--m-gap); }
.joinBX_agrAll { padding: var(--m-gap); border-bottom: 1px dashed var(--color-line); }
.joinBX_agrAll .joinBX_head { font-size: var(--font-l); font-weight: 600; color: var(--color-emp-bk); }
.joinBX_agrAll a { flex: 0 auto; font-size: var(--font-s); }
.joinBX_tabs { display: flex; }
.joinBX_tab { flex: 1; padding: 6px 10px; line-height: 130%; font-size: var(--font-s); background-color: var(--color-line); text-align: center; }
.joinBX_tab_on { background-color: var(--color-bg01); }
.joinBX_tab:first-child { border-radius: var(--radius-out) 0 0 0; }
.joinBX_tab:last-child { border-radius: 0 var(--radius-out) 0 0; }
.joinVRF { padding: var(--m-gap); }
/* M 회원가입 완료 */
.welcomeBX { display: flex; flex-direction: column; justify-content: center; gap: 20px; border-bottom: 1px dashed var(--color-line); margin: 20px 0; padding: 20px; height: 40vh; min-height: 200px; text-align: center; word-break: keep-all; word-wrap: break-word; }
/* M 개인정보처리방침 */
.mbsTerms { margin: auto; }
.mbsTermBX { padding: var(--m-gap); }
.mbsTerms_ol { display: flex; flex-direction: column; gap: 4px; counter-reset: prvList; margin: 0 auto; padding: 0; list-style: none; }
.mbsTerms_goto:before { counter-increment: prvList 1; content: counter(prvList, decimal-leading-zero)'.'; color: var(--color-theme); font-weight: 600;}
.mbsTerms_goto { box-sizing: border-box; display: flex; align-items: center; gap: 8px; border-radius: var(--radius-out); padding: 12px 20px; height: 100%; min-height: 56px; background-color: var(--color-bg02); text-decoration: none; color: var(--color-normal); font-size: var(--font-m); word-break: keep-all; word-wrap: break-word; line-height: 120%; }
#privacyContainer { display: flex; flex-direction: column; gap: 60px; margin: 60px auto; }
.mbsPrivacy_terms { padding-bottom: 60px; border-bottom: 1px dashed var(--color-line); line-height: 160%; }
.mbsPrivacy_docs { margin-top: 30px; }
.mbsPrivacy_docs img { max-width: 100%; }
/* M 이용약관 */
#termsContainer { margin: 40px auto; line-height: 160% }
#termsContainer img { max-width: 100%; }
/* M 강좌판매페이지
-----------------------------------------------------------------------------------------------------------------------------------------*/
/* M 강좌목록 공통 */
.cListViewer .schbx_btns { gap: 0px; }
.cListViewer .schbx_btns select:nth-child(2) { flex: 1 0; }
.cListRomote { flex-wrap: wrap; margin: var(--m-gap); }
.cListRomote .brdfnc_l { flex: 1 0; text-align: right; }
.cListRomote .brdfnc_r { flex: 1 0; display: flex; gap: 4px; }
.cListRomote .brdfnc_r > .mybtn[title="결제하기"] { flex: 1 0; }
.listMod_modes { display: none; }
.courseList { border-top: 1px solid var(--color-theme); }
.coursebx { position: relative; padding: 46px var(--m-gap) var(--m-gap) var(--m-gap); border-bottom: 1px dashed var(--color-line); }
.act_option { position: absolute; top: 0; right: 0; z-index: 2; display: flex; gap: 6px; justify-content: flex-end; width: 100%; height: 42px; }
.prd_off { filter: grayscale(1); opacity: .4; }
.prd_off .mybtn { pointer-events: none; }
/* M 강좌목록 리스트형 */
.courseList .thumb + .item { margin-top: 2px; }
.courseList .item_name { line-height: 1.5em; }
.courseList .thumb_img { width: 100%; max-height: initial; }
.act { display: flex; flex-direction: column; justify-content: space-between; }
.act_purchase { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; padding: 14px; border-radius: var(--radius-out); background-color: var(--color-bg02); }
.act_purchase_picks { flex: 1 0 140px; display: flex; gap: 30px; justify-content: center; margin: 0; padding: 0; list-style: none; }
.act_purchase_btns { flex: 1 0; display: flex; gap: 4px; justify-content: center; }
}
/* Desktop Device */
@media (min-width : 768px) {
.mda-mb { display: none; }
/* 마이페이지 */
/* 마이페이지 메인
-----------------------------------------------------------------------------------------------------------------------------------------*/
.mpgOutlines { display: flex; flex-direction: column; gap: 2px; }
.mpgUser { display: flex; justify-content: space-between; align-items: center; gap: 0 10px; position: relative; overflow: hidden; border-radius: var(--radius-out); padding: 12px 20px; }
.mpgUser:before { content: " "; position: absolute; inset: 0; background-color: var(--color-theme); opacity: 0.1; z-index: 0; }
.mpgUser > div { flex: 0 0 auto; position: relative; z-index: 1; }
.mpgUser_name { font-size: var(--font-l); color: var(--color-emp-bk); }
.mpgInfos { flex: 1; display: grid; grid-template-columns: repeat( auto-fit, minmax( 160px, auto)); flex-wrap: wrap; gap: 2px; }
.mpgInfo { flex-basis: 120px; display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; background-color: var(--color-bg01); border-radius: var(--radius-out); }
.mpginfo_sbj { font-size: var(--font-s); line-height: 100%; }
.mpginfo_val { display: flex; gap: 4px; font-size: var(--font-l); color: var(--color-emp-bk); font-weight: 600; line-height: 100%; }
.mpginfo_link { text-decoration: none; color: var(--color-theme); }
.mpginfo_link:hover { text-decoration: underline; }
.mpgPre { margin-top: 80px; }
.brdpreview { }
.brdpreview .brd { padding: 16px 0; font-size: var(--font-s); }
.brdpreview .brd_col { padding: 0 6px; }
.brdpreview .item_name { font-size: var(--font-m); }
.brdpreling .brd { grid-template-columns: minmax(280px, 1fr) minmax(100px, 176px) minmax(80px, 110px); }
.brdprelfin .brd { grid-template-columns: minmax(280px, 1fr) 110px max(114px, 14%) 100px; }
.brdprelfin .brd_head { border-color: var(--color-line); }
.brdprelfin .item_name { font-weight: 500; color: var(--color-normal); }
.brdprelfin .item_tech { font-weight: 400; color: var(--color-normal); }
.brdprescript .brd { grid-template-columns: minmax(280px, 1fr) 148px 114px; }
/* 수강중인 강좌
-----------------------------------------------------------------------------------------------------------------------------------------*/
.brdling > .brd { grid-template-columns: minmax(280px, 1fr) minmax(100px, 200px) minmax(80px, 140px) }
.brdling_ltm { font-weight: 600; }
/* 수강중인 강좌 - 일시정지 */
.lecpause { margin-top: 20px; max-width: 600px; font-size: var(--font-s); border-radius: var(--radius-out); border: 1px solid var(--color-line); }
.lecpause_sum::-webkit-details-marker { display: none; }
.lecpause_sum { display: flex; justify-content: space-between; align-items: center; padding: 16px; cursor: pointer; background-color: var(--color-bg01); overflow: hidden; }
.lecpause_sum:after { content: " "; border: 6px solid transparent; border-bottom: none; border-top: 10px solid var(--color-unfocus); transition: 0.3s; }
.lecpause[open] .lecpause_sum:after { transform: rotateZ(180deg); }
.lecpause_title { margin: 0; }
.brdlecpause { grid-template-columns: minmax(3em, 6em) 1fr 1fr; }
.brdlecpause > .hbrd2_th { padding: 14px 10px; }
.brdlecpause > .hbrd2_td { padding: 14px 10px; }
.lecpause_func { padding: 16px; }
.lecrst_mrg { grid-column: 1 / none; }
.lecpause_endup { color: var(--color-theme); font-weight: 700; }
.lecpause_expired { color: var(--color-unfocus); }
/* 수강종료 강좌
-----------------------------------------------------------------------------------------------------------------------------------------*/
/* 수강종료 강좌 리스트 */
.brdlfin > .brd { grid-template-columns: minmax(280px, 1fr) minmax(114px, 14%) minmax(114px, 14%) 150px; }
.brdlfin_noend.t-end { text-decoration: line-through; }
/* 메모 */
.myltrace { margin: 20px 0; padding-top: 20px; border-top: 1px dashed var(--color-line); }
.mylmemo { border-top: 1px solid var(--color-theme); border-bottom: 1px dashed var(--color-line); padding: 30px 0; line-height: 160%; word-wrap: break-word; word-break: keep-all; }
.myltrace + .brd_mrg { border-top: 1px solid var(--color-theme); border-bottom: 1px dashed var(--color-line); }
/* 수강이력 */
.brdlflogall { border-top: 1px solid var(--color-theme); border-bottom: 1px dashed var(--color-line); padding: 30px 0; }
.lflog { border-radius: var(--radius-out); border: 1px solid var(--color-line); transition: 0.3s; overflow: hidden; }
.lflog + .lflog { margin-top: 10px; }
.lflog_sum::-webkit-details-marker { display: none; }
.lflog_sum { display: flex; justify-content: space-between; align-items: center; gap: 0 20px; padding: 20px; line-height: 130%; cursor: pointer; background-color: var(--color-bg01); }
.lflog_sum:after { content: " "; border: 6px solid transparent; border-bottom: none; border-top: 10px solid var(--color-unfocus); transition: 0.3s; }
.lflog[open] .lflog_sum:after { transform: rotateZ(180deg); }
.lflog_title { margin: 0; font-size: 16px; font-weight: 600; line-height: 140%; }
/* 수강이력 - 테이블 */
.brdlflog { grid-template-columns: repeat( 3, minmax(1%, 1fr)); }
.brdlflog.brdlfcert { grid-template-columns: repeat( 5, minmax(1%, 1fr)); }
.brdlflog > .brd_br:last-child { display: none; }
.brdlflog > .brd_mrg { border-bottom: none; }
.brdlflog_mintime,
.brdlflog_cert { display: none; }
.brdlflog.brdlfcert .brdlflog_mintime,
.brdlflog.brdlfcert .brdlflog_cert { display: flex; justify-content: center; align-items: center; }
.brdlflog > .hbrd2_th { padding: 12px 16px; }
.brdlflog > .hbrd2_td { padding: 14px 16px; }
.mylflog_cert { text-align: right; }
/* 시험리스트 */
.brdlfexl > .brd { grid-template-columns: 4rem 1fr min(20%, 10rem) 4.6rem min(19%, 10rem); }
.lfexl_score .brd_val { color: var(--color-theme); font-weight: 500; }
.lfexl_nottake.lfexl_score { color: var(--color-unfocus); }
/* 시험상세 */
.lfexname { padding: 20px; border-radius: var(--radius-out); background-color: var(--color-bg01); }
.lfexname .brdcap_r { flex: 0 0 auto; }
.lfexsum { display: flex; flex-wrap: wrap; gap: 1px; align-items: stretch; overflow: hidden; border-radius: var(--radius-out); border: 1px solid var(--color-line); margin-bottom: 40px; padding: 0; background-color: var(--color-line); }
.lfexsum .brd_col { flex: 1 1 max(300px, 44%); display: flex; align-items: stretch; margin: 0; padding: 0; text-align: left; background-color: var(--color-emp-wt); }
.lfexsum .brd_dt { flex: 0 0 110px; display: flex; align-items: center; }
.lfexsum .brd_dd { flex: 1 1; }
.brdlfscore > .brd { grid-template-columns: 4rem 1fr 1fr 5rem; }
.lfscore.lfexl_unv { background-color: var(--color-bg01); color: var( --color-unfocus); font-weight: 400; opacity: .6; }
.lfscore > .lfexl_name { text-align: left; }
.lfscore_score .brd_val { color: var(--color-theme); font-weight: 500; }
/* 퀴즈 */
.brdlfqzl > .brd { grid-template-columns: 64px 1fr min(20%, 160px) 74px 128px; }
.lfqzl.lfqzl_unv { background-color: var(--color-bg01); color: var( --color-unfocus); font-weight: 400; opacity: .6; }
.lfqzl_curr.brd_col { align-items: flex-start; padding: 0 0 0 16px; }
.lfqzl_score .brd_val { color: var(--color-theme); font-weight: 500; }
.lfqzl_score.lfqzl_nottake .brd_val { color: var(--color-unfocus); font-weight: 400; }
.lfqzl_unv .v-bs1 { border-color: var(--color-unfocus); background-color: transparent; color: var(--color-unfocus); }
/* 과제 */
.brdlfhwl > .brd { grid-template-columns: 4rem 1fr min(20%, 12rem) 4.8rem min(19%, 9rem); align-items: center; }
.lfhwl.lfhwl_unv { background-color: var(--color-bg01); color: var( --color-unfocus); font-weight: 400; opacity: .6; }
.lfhwl_curr { align-items: flex-start; }
.lfhwl_score .brd_val { color: var(--color-theme); }
.lfhwl_score.lfhwl_nottake .brd_val { color: var(--color-unfocus); font-weight: 400; }
.lfhwl_unv .v-bs1 { border-color: var(--color-unfocus); background-color: transparent; color: var(--color-unfocus); }
/* 장바구니, 구매
-----------------------------------------------------------------------------------------------------------------------------------------*/
/* 장바구니, 장바구니 결제, 주문상세, 연장상세 공통 */
.odgrid { display: grid; grid-template-areas: "list receipt"; grid-template-columns: 1fr minmax(230px, 30%); grid-column-gap: 40px; align-items: stretch; }
.odgrid_l { grid-area: list; display: grid; gap: 60px; }
.odgrid_r { grid-area: receipt; position: relative; }
.odgrid_r .p-des { word-break: keep-all; word-wrap: break-word; }
/* 장바구니, 결제 공통 */
.brdmyct { border-top: 1px solid var(--color-theme); padding-top: 30px; }
.brdmyct .prdbx { border-bottom: 1px dashed var(--color-line); margin-bottom: 30px; padding-bottom : 30px; }
.brdmyct .prdbx:last-child { margin-bottom: 0px; }
.brdmyct .checks { flex: 0 0 20px; }
.brdmyct .thumb { flex: 0 0 100px; }
.brdmyct .itemqtt { flex: 0 0 92px; display: flex; align-items: center; }
.brdmyct_empt { border-bottom: 1px dashed var(--color-line); margin-bottom: 30px; padding-bottom : 30px; text-align: center; }
.myctbtn { padding: 0 20px; }
/* 장바구니 - step01 */
.myct01 .odgrid_l { gap: 0px; }
/* 장바구니 - step02 - 결제 */
.brdmyctpay { border-top: 1px solid var(--color-theme); padding-top: 30px; }
.brdmyctpay .prdbx { border-bottom: 1px dashed var(--color-line); margin-bottom: 30px; padding-bottom : 30px; }
.brdmyctpay .prdbx:last-child { margin-bottom: 0px; }
.brdmyctpay .thumb { flex: 0 0 100px; }
.brdmyctpay .itemqtt { flex: 0 0 50px; display: flex; justify-content: center; align-items: center; }
.itemcpn { flex: 0 0 80px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
.itemcpn_prc { margin: 0; padding: 0; }
.itemcpn_btn { margin: 0; padding: 0; }
.brdctadd { grid-template-columns: minmax( 4em, 8em ) 1fr; }
.brdctdsc { grid-template-columns: minmax( 4em, 8em ) 1fr; }
.myadif { display: grid; grid-template-areas: "add sum" "dsc sum" "pay sum"; grid-template-columns: 1fr minmax( 240px, 270px ); gap: 0 50px; margin-top: 100px; }
/* 장바구니 - step02 - 결제 - 쿠폰 */
.cpnuse_emp { display: flex; justify-content: center; align-items: center; height: 160px; background-color: var(--color-bg02); font-size: 14px; }
/* 장바구니 - step02 - 적립금 */
.reward_noti { margin: 8px 0 4px; padding: 0; color: var(--color-theme); }
.reward_use + .reward_terms { margin-top: 10px; }
.reward_terms .vul_li:not(.vul_important):before { content: "\2219"; padding-right: 4px; }
/* 장바구니 - step02 - 결제 - 결제수단 */
.paymts { list-style: none; display: grid; grid-template-columns: repeat( auto-fit, minmax( 10em, auto)); gap: 4px; margin: 0; padding: 0; }
.paymts_li { margin: 0; padding: 0; }
.paybanks { border: 1px solid var(--color-theme); ; margin-top: 5px; padding: 15px; background-color: #fff; }
.paybanks .hul_li { flex: 1 0 auto; }
.depositTime { padding-right: 10px; font-size: 0.9em; color: var(--color-theme); font-weight: 600; }
.getFree { color: var(--color-theme); }
/* 장바구니 - step03 - 주문 완료 */
.oddone { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; border-top: 1px solid var(--color-theme); border-bottom: 1px dashed var(--color-line); margin: 20px 0; padding: 20px; height: 40vh; min-height: 200px; text-align: center; word-break: keep-all; word-wrap: break-word; }
/* 주문, 배송 조회
-----------------------------------------------------------------------------------------------------------------------------------------*/
/* 주문 목록 */
.brdodl > .brd { grid-template-columns: 8rem 1fr 6.8rem 7.4rem 5rem; }
.odhstr_link { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; }
/* 주문상세 - 상태 표시 - 연장상세 공통 */
.odbrf { position: relative; overflow: hidden; grid-template-columns: 1fr auto auto auto; gap: 40px; margin: 20px auto; padding: 24px; font-size: var(--font-l); }
.odbrf:before { content: " "; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0.1; z-index: 0; background-color: var(--color-theme); }
.odbrf_cancel:before { background-color: var(--color-unfocus); }
.odbrf_cancel .t-sbjv { color: var(--color-unfocus); }
.brdoddt { border-top: 1px solid var(--color-devided); padding-top: 30px; }
.oddtprd { justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px dashed var(--color-line); margin-bottom: 30px; padding-bottom: 30px; }
.odstat { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.odstat_stnb { color: var(--color-theme); }
.odstat_done { color: var(--color-emp-bk); }
.odstat_cancel { color: var(--color-unfocus); }
/* 주문상세 - 배송안내 */
.parcel { flex: 0 0 min(80px); }
.parcel_infos { margin: 0; padding: 0; list-style: none; font-size: var(--font-s); }
.parcel_info { margin: 0; padding: 0; }
.parcel_detail { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
/* 주문상세 - 배송정보 */
.brdodinfo { grid-template-columns: 8em 1fr; }
/* 연장내역 */
.brdext > .brd { grid-template-columns: 8rem 1fr 6.8rem 7.4rem 5rem; }
/* 스크랩 */
.brdscript > .brd { grid-template-columns: 44px 1fr 120px 136px; }
.brdscript .thumb { flex: 0 0 120px; }
.brdscript_check { align-items: flex-start; height: 100%; }
/* 정기결제
-----------------------------------------------------------------------------------------------------------------------------------------*/
/* 정기결제 강좌 목록 */
.brdlsubs > .brd { grid-template-columns: minmax(240px, 1fr) minmax(74px, 110px) minmax(100px, 170px) minmax(56px, 86px) minmax(88px, 130px) }
.lsubs_stat { display: block; }
.lsubs_goon { color: var(--color-theme); }
.brdlsubs_numb { display: none; }
/* 보유머니
-----------------------------------------------------------------------------------------------------------------------------------------*/
/* 적립금 */
.mymgtab { padding: 20px 0; }
.brdmg > .brd { grid-template-columns: minmax(70px, 120px) minmax(280px, 1fr) minmax(100px, 154px) minmax(110px, 150px); }
.brdmg_mgs .brdmg_plus { font-weight: 500; color: var(--color-theme); }
.brdmg_adms { display: flex; gap: 10px; align-items: center; }
.brdmg_adm { flex: 0 auto; }
.brdmg_note { position: relative; }
.brdmg_note:before { content: ""; position: absolute; inset: 0; background-color: var(--color-theme); opacity: .1; }
/* 할인권 */
.brdcpn { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; align-items: stretch; border-top: 1px solid var(--color-theme); border-bottom: 1px dashed var(--color-line); padding: 20px 0; }
.brdcpn > .brd_mrg { border-bottom: none; }
.cpnrbx { border-radius: var(--radius-out); padding: 24px; background-color: var(--color-bg01); }
.cpnr { display: flex; align-items: center; gap: 4px; }
.cpnr > .ip-txt { flex: 1 1; min-width: 4.4em; }
.cpnr > .mybtn { flex: 0 0 fit-content; }
/* 수강권 */
.brdtk { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; align-items: stretch; border-top: 1px solid var(--color-theme); border-bottom: 1px dashed var(--color-line); margin-top: 20px; padding: 20px 0; }
.brdtk > .brd_mrg { border-bottom: none; }
/* 질문과 답변 - 임시적용 게시판 스킨 수정 후 삭제 가능
-----------------------------------------------------------------------------------------------------------------------------------------*/
.brdmyqna {}
.brdmyqna .sb_area_board_controler { display: flex; justify-content: space-between; border-top-color: var(--color-theme) !important; border-bottom: none !important; padding: 10px 0; height: auto!important; }
.brdmyqna .sb_area_board_controler .board_status { float: none !important; font: initial; font-size: var(--font-s); font-family: var(--theme-font); }
.brdmyqna .sb_area_board_controler .board_search { float: none !important; display: flex; align-items: center; justify-content: flex-end; height: 100%; }
.brdmyqna .sb_area_board_controler .board_search ol { display: flex; align-items: center; gap: 4px; }
.brdmyqna .sb_area_board_controler .board_search ol li { float: none !important; display: flex; padding: 0 !important; font: initial; font-size: var(--font-m); }
.brdmyqna .inputBoardSearch { box-sizing: border-box; display: flex; align-items: center; padding: 2px 8px; min-height: 20px; font-size: var(--font-s); font-family: var(--theme-font); }
.brdmyqna .sb_table_board_basic colgroup col:nth-child(3) { width: 200px !important; }
.brdmyqna .sb_table_board_basic colgroup col:last-child { width: 90px !important; }
.brdmyqna .sb_table_board_basic thead th { border-top: 1px solid var(--color-devided); border-bottom: 1px solid var(--color-line); height: 38px; font: initial; font-size: var(--font-s); font-family: var(--theme-font); background-color: var(--color-bg01); background-image: none !important; color: var(--color-normal); }
.brdmyqna .sb_table_board_basic tbody td { padding: 8px 4px; font-family: var(--theme-font) !important; font-size: var(--font-m) !important; }
.brdmyqna .sb_table_board_basic tbody td.hit,
.brdmyqna .sb_table_board_basic tbody td.date { font-family: var(--theme-font) !important; font-size: var(--font-s) !important; }
.brdmyqna .area_board_list .img_holder .img_footer { height: auto!important; }
.brdmyqna .sb_board_view { border-top: 1px solid var(--theme-color); }
.brdmyqna .sb_board_view .board_subject { font: initial; font-size: var(--font-l); font-weight: 600; font-family: var(--theme-font); color: var(--theme-color); }
.brdmyqna .sb_board_view .sb_board_writeInformation ol { display: flex; gap: 2px; align-items: center; margin-top: 10px; }
.brdmyqna .sb_board_view .sb_board_writeInformation ol li { padding: 0 20px 0 0; font: initial; font-size: var(--font-s); font-family: var(--theme-font); color: var(--color-normal); }
.brdmyqna .sb_board_view .sb_board_writeInformation ol li.txt_boardCategory { padding: 0!important; font: initial; font-size: var(--font-s); font-weight: 600; font-family: var(--theme-font); color: var(--color-normal); }
.brdmyqna .top-left,
.brdmyqna .bottom-left,
.brdmyqna .top-right,
.brdmyqna .bottom-right { display: none; }
.brdmyqna .insideAnswer { border: 1px solid var(--color-line); border-radius: var(--radius-out); margin-bottom: 10px; padding: 20px; }
.brdmyqna .insideAnswer .title { padding: 0; margin: 0 0 10px; }
.brdmyqna .insideAnswer .title > img { width: 0!important; height: 0!important; opacity: 0!important; }
.brdmyqna .insideAnswer .title:before { content: "문의하신 내용의 답변입니다."; font-size: var(--font-m); font-weight: 600; color: var(--theme-color); }
.brdmyqna .insideAnswer .answerCont { padding: 0 0 0 1em; }
/* 회원정보
-----------------------------------------------------------------------------------------------------------------------------------------*/
/* 회원정보 로그인 */
.myVRFS { padding-bottom: 14vh; }
.myVRFS .t-h2 { text-align: center; }
.myVRF { display: flex; flex-direction: column; gap: 20px; margin: auto; text-align: center; }
.myVRF_noti > p { margin: 0; font-size: var(--font-m); word-break: keep-all; word-wrap: break-word; letter-spacing: -.5px; line-height: 160%; }
.myVRF_func { margin: 0 auto; padding: 0; list-style: none; width: 400px; }
.myVRF_actn { margin: 0 auto; width: 400px; }
.myVRF_help { font-size: var(--font-l); color: var(--theme-emp-color); }
.myVRF_ips > input { height: 50px; }
/* 회원정보 수정, 회원가입 정보입력 */
.brdmymf_val { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0 ; }
.brdmymf { grid-template-columns: minmax( 120px, auto ) 1fr; }
.brdmymf_noti { margin-top: 4px; color: var(--color-theme); }
.brdmymf_desc { margin-top: 4px; }
/* 등록 기기 관리
-----------------------------------------------------------------------------------------------------------------------------------------*/
.mydvsum { display: grid; justify-content: center; align-items: center; grid-template-columns: auto minmax( 260px, auto) auto minmax( 260px, auto); gap: 10px 14px; padding: 20px; border-radius: var(--radius-out); background-color: var(--color-bg01); word-wrap: break-word; word-break: keep-all; }
.mydvsum_sbj { padding-right: 4px; font-weight: 600; font-size: var(--font-s); }
.mydvsum_val { margin: 0; }
.mydvsum_val > .t-val,
.mydvsum_val > .t-unit { font-weight: 600; }
.mydvbx + .mydvbx { margin-top: 60px; }
.brdmydv > .brd { grid-template-columns: 1fr minmax( 70px, 22%) minmax( 70px, 22%) 90px; }
.brdmydv_name .brd_val { font-size: 1.1em; font-weight: 600; }
.brdmydv_id { font-weight: 400; }
.brdmydv_remove { border: none; background-color: transparent; }
/* 수료증 관리
-----------------------------------------------------------------------------------------------------------------------------------------*/
.mycerttab { border-top: 1px dashed var(--color-line); margin: 20px 0; padding-top: 20px; }
.brdcert > .brd { grid-template-columns: 1fr minmax(76px, 14%) minmax(76px, 14%) minmax(100px, 16%) minmax(100px, 150px); }
.brdcert .thumb { flex: 0 0 140px; }
.cert_done { color: var(--color-theme); font-weight: 500; }
.cert_more { color: var(--color-emp-bk); }
.cert_cancle { color: var(--color-normal); }
.cert_conditions { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 1em; margin-top: 4px; font-size: var(--font-s); color: var(--color-unfocus); }
/* 멤버스
-----------------------------------------------------------------------------------------------------------------------------------------*/
/* 공통 */
.mbs { padding-bottom: 14vh; }
.mbs > article { flex: 1; }
.mbsBXs { display: flex; flex-direction: column; gap: 20px; margin: 40px auto; width: 400px; font-size: 15px; word-break: keep-all; word-wrap: break-word; }
.mbsBXs .p-des { margin: 10px 0; }
.mbsBX { margin: 0; padding: 0; list-style: none; }
.mbsBX input { position: relative; display: flex; align-items: center; margin: 0; padding: 16px; width: 100%; height: 50px; outline-offset: -1px; font-size: var(--font-m); font-weight: 400; }
.mbsBX_func { display: flex; flex-direction: column; margin: 0; padding: 0; }
.mbsBX_ips input:focus { outline-offset: -1px; }
.mbsBX_ips:first-child > input { border-radius: var(--radius-out) var(--radius-out) 0 0; }
.mbsBX_ips:last-child > input { border-radius: 0 0 var(--radius-out) var(--radius-out); border-top: none; }
.mbsBX_noti { border-radius: var(--radius-out); padding: 24px 20px; background-color: var(--color-bg01); font-size: var(--font-s); }
.mbsBX_noti h3 { text-align: center; }
.mbsBX_noti > p + p { margin-top: 10px; }
.mbsBX_help { display: flex; justify-content: center; }
.mbsBX_link { padding: 0 20px; text-decoration: none; color: var(--color-normal); line-height: 100%; }
.mbsBX_link[href="member_join.php"] { color: var(--color-theme); font-weight: 600; }
.mbsBX_link + .mbsBX_link { border-left: 1px solid var(--color-line); }
.findTabs { display: flex; flex-direction: row; align-items: flex-end; gap: 0; text-align: center; font-size: var(--font-l); font-weight: 400; }
.findTab { flex: 1 1 200px; display: flex; justify-content: center; align-items: center; height: 50px; border: 1px solid var(--color-bg02); border-bottom-color: var(--color-line); background-color: var(--color-bg02); color: var(--color-unfocus); cursor: pointer; text-decoration: none; }
.findTabOn { border-radius: var(--radius-out) var(--radius-out) 0 0; border: 1px solid var(--color-line); border-bottom-color: var(--color-emp-wt); background-color: var(--color-emp-wt); font-weight: 600; color: var(--color-normal); }
/* 로그인 */
.mbsLogin { display: flex; justify-content: center; align-items: center; text-align: center; }
.mbsBX .loginBx_actn_sb { border: none; font-size: 20px; }
.loginSns { display: flex; justify-content: center; align-items: center; margin-top: 60px; padding: 20px 0; border-top: 1px dashed var(--color-line); border-bottom: 1px dashed var(--color-line); }
/* 로그인 임시 제한 */
.mbsBlock { display: flex; justify-content: center; align-items: center; text-align: center; }
.mbsBlock .t-h2 { margin-top: 10px; }
/* 아이디 비밀번호 찾기 */
.mbsFind { display: flex; justify-content: center; align-items: center; text-align: center; }
.findBx_desc { font-size: var(--font-m); }
.findBx { min-height: 300px; }
#fPW .findBx_func_name { border-top: none; border-radius: 0; }
/* 회원가입 약관동의 */
.mbsJoin { margin: auto; width: 560px; }
.mbsJoin .t-h2 { text-align: center; }
.mbsJoin .mysteps { justify-content: space-around; border-top: 1px dashed var(--color-line); border-bottom: 1px dashed var(--color-line); padding: 20px; }
.joinBX { display: flex; flex-direction: column; gap: 30px; margin: 20px auto 60px; border-top: 1px solid var(--color-devided); }
.joinBX_head { display: flex; justify-content: space-between; font-size: var(--font-m); }
.joinBX_reqY:before { content: "(필수)"; padding-right: 4px; font-weight: 600; }
.joinBX_reqN:before { content: "(선택)"; padding-right: 4px; font-weight: 600; }
.joinBX_docs { margin: 20px 0 40px; }
.joinBX_doc { overflow-y: scroll; border-radius: var(--radius-out); padding: 20px; height: 170px; background: var(--color-bg01); }
.joinBX_doc::-webkit-scrollbar { width: 6px; height: 6px; }
.joinBX_doc::-webkit-scrollbar-thumb { background-color: var(--color-unfocus); border-radius: 2px; }
.joinBX_doc::-webkit-scrollbar-track { background-color: var(--color-bg02); }
.joinBX_agrAll { padding: 30px 0; border-bottom: 1px dashed var(--color-line); }
.joinBX_agrAll .joinBX_head { font-size: var(--font-l); font-weight: 600; color: var(--color-emp-bk); }
.joinBX_tabs { display: flex; }
.joinBX_tab { flex: 1; padding: 6px; font-size: var(--font-s); background-color: var(--color-line); text-align: center; cursor: pointer; }
.joinBX_tab:hover { background-color: var(--color-unfocus); color: var(--color-emp-wt); text-align: center; }
.joinBX_tab_on { background-color: var(--color-bg01); }
.joinBX_tab:first-child { border-radius: var(--radius-out) 0 0 0; }
.joinBX_tab:last-child { border-radius: 0 var(--radius-out) 0 0; }
.joinBX_agrAll a { font-size: var(--font-s); }
.joinVRF { padding: 30px 0; }
.joinBTNs { display: flex; gap: 10px; margin-top: 50px; }
/* 회원가입 팝업 - 일반가입, 간편가입 */
.mdbx_joins { width: 400px; }
.mdbx_joins .mdbx_body { padding: 0 1em 1em; }
.mdbx_join_unit + .mdbx_join_unit { border-top: 1px dashed var(--color-line); margin-top: 30px; padding-top: 30px; }
.mdbx_join_unit .t-h4 { margin-bottom: 10px; color: var(--color-emp-bk); }
/* 회원가입 정보입력 */
.brdJoinReg { grid-template-columns: 126px 1fr; }
/* 회원가입 완료 */
.welcomeBX { display: flex; flex-direction: column; justify-content: center; gap: 20px; border-bottom: 1px dashed var(--color-line); margin: 20px 0; padding: 20px; height: 40vh; min-height: 200px; text-align: center; word-break: keep-all; word-wrap: break-word; }
/* 개인정보처리방침 */
.mbsTerms { margin: auto; width: 560px; }
.mbsTerms_ol { display: grid; grid-template-columns: repeat( auto-fit, minmax( 400px, 1fr)); gap: 4px; counter-reset: prvList; margin: 40px auto; padding: 0; list-style: none; }
.mbsTerms_goto:before { counter-increment: prvList 1; content: counter(prvList, decimal-leading-zero)'.'; color: var(--color-theme); font-weight: 600;}
.mbsTerms_goto { box-sizing: border-box; display: flex; align-items: center; gap: 8px; border-radius: var(--radius-out); padding: 12px 20px; height: 100%; min-height: 56px; background-color: var(--color-bg02); text-decoration: none; color: var(--color-normal); font-size: var(--font-m); word-break: keep-all; word-wrap: break-word; line-height: 120%; }
.mbsTerms_goto:hover { background-color: var(--color-bg01); }
#privacyContainer { display: flex; flex-direction: column; gap: 80px; margin: 80px auto; }
.mbsPrivacy_terms { padding-bottom: 80px; border-bottom: 1px dashed var(--color-line); line-height: 160%; }
.mbsPrivacy_docs { margin-top: 30px; }
.mbsPrivacy_docs img { max-width: 100%; }
/* 이용약관 */
#termsContainer { margin: 40px auto; line-height: 160% }
#termsContainer img { max-width: 100%; }
/* 강좌판매페이지
-----------------------------------------------------------------------------------------------------------------------------------------*/
/* 강좌목록 공통 */
.listMod_btn svg { width: 15px; height: 16px; fill: var(--color-unfocus); }
.listMod_btn.listMod_on { border-color: var(--color-theme); color: var(--color-theme); }
.listMod_btn.listMod_on svg { fill: currentColor;}
.act_option { display: flex; gap: 6px; justify-content: flex-end; }
.act_opt:hover { background-color: transparent; }
.act_opt:hover > svg { fill: var(--color-theme); animation: pulse 2s infinite ease-in-out;}
.prd_off { filter: grayscale(1); opacity: .4; }
.prd_off .act_purchase { pointer-events: none; }
/* 강좌목록 리스트형 */
.modeList .courseList { border-top: 1px solid var(--color-theme); }
.modeList .coursebx { padding: 30px 0; border-bottom: 1px dashed var(--color-line); }
.modeList .thumb { flex: 0 0 min(260px, 30%); }
.modeList .thumb + .item { margin-top: 2px; }
.modeList .act { flex: 0 0 220px; display: flex; flex-direction: column; justify-content: space-between; }
.modeList .act_purchase { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; padding: 14px; border-radius: var(--radius-out); background-color: var(--color-bg02); }
.modeList .act_purchase_picks { display: flex; gap: 30px; justify-content: center; }
.modeList .act_purchase_btns { flex: 1; display: flex; gap: 4px; justify-content: center; }
.modeList .act_purchase_buy > .mybtn { padding: 2px 6px; }
.modeList .act_purchase_buy > .mybtn:last-child { flex: 1 0 110px; }
.modeList .item_name { line-height: 1.5em; }
/* 강좌목록 카드형 */
.modeThumb .cListRomote { display: none; }
.modeThumb .courseList { display: grid; gap: 100px 30px; grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr )); border-top: 1px solid var(--color-theme); padding-top: 30px; }
.modeThumb .coursebx { position: relative; flex-direction: column; justify-content: space-between; padding-top: 30px; }
.modeThumb .thumb { background-color: var(--color-bg02); text-align: center; }
.modeThumb .thumb_img { width: 100%; }
.modeThumb .item { }
.modeThumb .item_name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; line-height: 1.5em; min-height: 3em; }
.modeThumb .item_icons { position: absolute; top: 0; overflow: hidden; box-sizing:border-box; display: flex; gap: 4px; align-items: center; padding: 0 0 0 2px; width: calc( 100% - 70px ); height: 30px; }
.modeThumb .item_icons > span { display: flex; align-items: center; margin: 0; padding:0; height: 100%; }
.modeThumb .item_icons > span img { max-height: 100%; }
.modeThumb .act { position: absolute; top: 0; right: 0; width: 60px; height: 30px; z-index: 2; }
.modeThumb .act_purchase { display: none; }
.modeThumb .act_option { gap: 0; }
.modeThumb .act_opt { margin: 0; width: 30px; height: 30px; }
/* 강좌상세페이지 공통 */
.CVBX .item_icons + .t-h2 { margin-top: 0; }
.CVBX .t-h2 { font-size: 28px; }
/* 강좌상세페이지 썸네일 슬라이드 */
.pvthumb { position: relative; overflow: hidden; border-radius: var(--radius-out); margin: auto; width: 100%; }
.pvthumb_track { display: flex; transition: transform 0.5s ease; }
.pvthumb_item { flex: 0 0 100%; box-sizing: border-box; }
.pvthumb_item_img { width: 100%; display: block; object-fit: cover; }
.pvthumb_video { width: 100%; aspect-ratio: 16 / 9; }
.pvthumb_item iframe { width: 100%; height: 100%; border: none; display: block; }
.pvthumb_btn { position: absolute; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; color: var(--color-theme); cursor: pointer; z-index: 10; }
.pvthumb_btn > svg { width: 20px; height: 28px; display: inline-block; vertical-align: middle; }
.pvthumb_prev { left: 0px; }
.pvthumb_next { right: 0px; }
/* 강좌상세페에지 탭메뉴 */
.pvnav { overflow: hidden; display: flex; flex-direction: row; align-items: flex-end; gap: 0; border-radius: var(--radius-out) var(--radius-out) 0 0; text-align: center; font-size: var(--font-l); font-weight: 400; }
.pvnav_a { flex: 1 1; display: flex; justify-content: center; align-items: center; padding: 0 10px; height: 50px; border: 1px solid var(--color-bg02); border-bottom-color: var(--color-line); background-color: var(--color-bg02); color: var(--color-unfocus); cursor: pointer; text-decoration: none; }
.pvnav_on { border-radius: var(--radius-out) var(--radius-out) 0 0; border: 1px solid var(--color-line); border-bottom-color: var(--color-emp-wt); background-color: var(--color-emp-wt); font-weight: 600; color: var(--color-normal); }
.pvSum_unit { display: flex; }
.prdView { overflow: hidden; min-width: 0; }
.prdview_unit .t-h3 { margin-bottom: 20px; }
.prdview_unit .t-h3.hdbx { position: absolute; display: block !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }
/* 강좌상세페에지 기본 정보 */
.pvdet_infos { flex: 1; display: grid; grid-template-columns: repeat( auto-fit, minmax( 20%, auto)); gap: 2px; }
.pvdet_titles { grid-column: 1 / -1; position: relative; padding: 12px; }
.pvdet_titles:after { content: " "; position: absolute; inset: 0; border-radius: var(--radius-out); background-color: var(--color-theme); opacity: .1; }
.pvdet_title { position: absolute; display: block !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }
.pvdet_info { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 16px 20px; background-color: var(--color-bg01); border-radius: var(--radius-out); }
.pvdet_info dt { font-size: var(--font-s); line-height: 100%; }
.pvdet_info dd { margin: 0; padding: 0; font-size: var(--font-l); color: var(--color-emp-bk); font-weight: 600; line-height: 100%; }
.pvdet_info dd > .t-val { color: var(--color-theme); }
.pvdet_tech_link { font-size: var(--font-xs); }
.prdview_docs img { max-width: 100%; height: auto; }
.pvteach { display: flex; gap: 40px; }
.pvteach_prof { flex: 0 0 auto; max-width: 200px; }
.pvteach_prof_img { border-radius: var(--radius-out); max-width: 100%; }
.pvteach_desc { flex: 1; overflow: hidden; }
.pvteach_unit { line-height: 140%; word-break: keep-all; word-wrap: break-word; }
.pvteach_unit:not(:first-child) { margin: 30px 0 0 .4em; }
.pvteach_title { display: flex; justify-content: space-between; align-items: center; border-radius: var(--radius-out); margin-bottom: 20px; padding: 20px; background-color: var(--color-bg02); }
.pvteach_names { display: flex; gap: 10px; align-items: center; }
.pvteach_name:first-child { font-size: var(--font-l); font-weight: 600; }
.pvteach_remark { font-size: var(--font-l); font-weight: 600; color: var(--color-emp-bk); }
.pvteach_history > p { margin-bottom: 14px; font-size: 20px; font-weight: 600; line-height: 120%; }
.pvteach_latest { padding-top: 20px; }
.pvteach_latest .t-h4 { font-weight: 600; margin-bottom: 14px; }
.pvteach_articles { max-width: 100%; min-width: 0; }
.pvteach_article { display: flex; align-items: center; gap: 6px; margin: 6px 0; max-width: 100%; min-width: 0; }
.pvteach_article:before { content: " "; flex: 0 0 3px; height: 3px; border-radius: 3px; background-color: var(--color-normal); }
.pvteach_article_a { overflow: hidden; flex: 0 1 auto; display: block; text-decoration: none; color: var(--color-normal); white-space: nowrap; text-overflow: ellipsis; }
.pvteach_article_a:hover {text-decoration: underline; }
/* 강좌상세페이지 교재 */
.prdViewBooks { display: grid; gap: 40px 30px; grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr )); }
.booksbx { position: relative; flex-direction: column; justify-content: space-between; }
.booksbx .item_infos { flex-wrap: wrap; gap: 0 8px; }
.booksbx .item_name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--font-m); font-weight: 500; text-overflow: ellipsis; word-break: keep-all; line-height: 1.2em; max-height: 2.4em; }
/* 강좌상세페이지 커리큘럼 */
.brdpvcur { grid-template-columns: auto 1fr 190px auto; }
.pvcur_sum::marker { display: none; }
.pvcur_sum::-webkit-details-marker { display: none; }
.pvcur_sum { list-style-type: none; display: flex; justify-content: space-between; align-items: center; }
.pvcur_sum:after { content: " "; border: 6px solid transparent; border-bottom: none; border-top: 10px solid var(--color-unfocus); transition: 0.3s; }
.pvcur[open] .pvcur_sum:after { transform: rotateZ(180deg); }
.brdpvcur .hbrd2_td { display: flex; justify-content: center; align-items: center; gap: 4px; min-height: 50px; }
.brdpvcur .pvcur_name.hbrd2_td { justify-content: flex-start; text-align: left; }
/* 강좌상세페이지 금액안내 구매버튼 */
.pvsum_sbj { flex: 1; display: flex; column-gap: 8px; align-items: center; }
.pvsum_total { font-weight: 600; }
.pvsum_total .prc-cur { font-size: 24px; color: var(--color-theme); }
.pvsum_mg { width: 100%; text-align: right; font-size: var(--font-s); font-weight: 400; color: var(--color-normal); }
.pvsum_book_ness .chklb_bx { opacity: .7; filter: grayscale(.5); }
.pvsum_mrguse { font-size: var(--font-s); }
.pvsum .icon_scrap { width: 18px; height: 16px; }
/* viewtype별 */
.viewtype01 .prdviews { position: relative; display: grid; gap: 60px; }
.viewtype01 .pvdet_infos { flex: 1; display: grid; grid-template-columns: repeat( auto-fit, minmax( 20%, auto)); gap: 2px; }
.viewtype01 #lecture_list_form { display: grid; gap: 4px 10px; grid-template-columns: 1fr auto auto; align-items: center; }
.viewtype01 .pvnavs { grid-column: 1 / -1; position: sticky; top: 0px; padding: 20px 0 10px; background-color: #ffffff; z-index: 21; }
.viewtype01 .pvsum_control { grid-column: span 3; display: flex; justify-content: space-between; border-bottom: 1px solid var(--color-theme); margin-bottom: 14px; }
.viewtype01 .pvsum_tit { grid-column: 1 / 2; margin: 0; padding-left: 6px; font-size: var(--font-l); line-height: 130%; word-break: keep-all; word-wrap: break-word; color: var(--color-emp-bk); }
.viewtype01 .pvsum_prc01 { grid-column: 2 / 4; padding-right: 6px; }
.viewtype01 #lecture_list_form:has(.pvsum_prc02) > .pvsum_prc01 { grid-column: 2 / 3; padding-right: 0; }
.viewtype01 .pvsum_prc02 { grid-column: 3 / 4; padding-right: 6px; }
.viewtype01 .pvsum_prc { margin: 0; }
.viewtype01 .pvsum_prc > .pvsum_sbj { position: absolute; display: block !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }
.viewtype01 .pvsum_books { grid-column: span 3; display: grid; grid-template-columns: 70px 1fr; align-items: center; border-top: 1px solid var(--color-line); margin-top: 16px; padding-top: 16px; }
.viewtype01 .pvsum_books > .t-h4 { grid-row: 1 / -1; margin: 0px; padding-left: 6px; font-size: 18px; color: var(--color-emp-bk); }
.viewtype01 .pvsum_booklist { overflow-y: auto; max-height: 24vh; }
.viewtype01 .pvsum_book { display: flex; margin: 0; padding: 8px 6px 8px 0; min-width: 0; }
.viewtype01 .pvsum_book .pvsum_val { margin: 0; text-align: right; flex: 0 0 8em; }
.viewtype01 .pvsum_book_ness .chklb_bx { opacity: .7; filter: grayscale(.5); }
.viewtype01 .pvsum_bookname { overflow: hidden; flex: 1; }
.viewtype01 .pvsum_bookname .chklb { overflow: hidden; max-width: 100%; }
.viewtype01 .pvsum_bookname .chklb_sp { overflow: hidden; flex: 1 1 auto; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.viewtype01 .pvsum_booktotal { grid-column: 2 / 3; border-top: 1px dashed var(--color-line); margin: 10px 0; padding: 12px 0 0 0; }
.viewtype01 .pvsum_total { grid-column: span 3; position: relative; display: grid; gap: 10px; grid-template-columns: 1fr auto auto; align-items: center; grid-auto-flow: dense; border-top: 1px solid var(--color-unfocus); margin: 10px 0 0; padding: 20px; font-weight: 600; }
.viewtype01 .pvsum_total:after { content: " "; position: absolute; inset: 0; background-color: var(--color-theme); opacity: .1; }
.viewtype01 .pvsum_total .prc-cur { grid-column: 2 / 4; text-align: right; }
.viewtype01 .pvsum_total:has(.pvsum_mg) .prc-cur { grid-column: 3 / 4 }
.viewtype01 .pvsum_btn { grid-column: span 3; display: flex; gap: 4px; margin: 16px auto 0; width: 400px; }
.viewtype02 .prdviews { position: relative; display: grid; gap: 60px; }
.viewtype02 .pvnavs { grid-column: 1 / -1; position: sticky; top: 0px; padding: 20px 0 10px; background-color: #ffffff; z-index: 21; }
.viewtype02 .pvsum { position: fixed; transform: translate( 0, -50% ); top: 50%; right: 10px; width: 300px; max-height: 60vh; }
.viewtype02 .pvsum_tit { font-size: 20px; line-height: 130%; word-break: keep-all; word-wrap: break-word; color: var(--color-emp-bk); }
.viewtype02 .pvsum_unit:has(.prc-org) { grid-area: org; margin: 0; padding: 0; width: fit-content; }
.viewtype02 .pvsum_unit:has(.prc-cur):not(.pvsum_total) { grid-area: cur; margin: 0; padding: 0; width: fit-content; }
.viewtype02 .pvsum_total { grid-area: total; }
.viewtype02 .pvsum_btn { grid-area: btn; }
.viewtype02 .pvsum_unit:has(.prc-org) .pvsum_sbj { display: none; }
.viewtype02 .pvsum_unit:has(.prc-cur) .pvsum_sbj { display: none; }
.viewtype02 .pvsum_books { grid-area: book; overflow: hidden; flex: 0 0 30%; }
.viewtype02 .pvsum_books > .t-h4 { margin-bottom: 10px; font-size: 16px; color: var(--color-emp-bk); }
.viewtype02 .pvsum_booklist { overflow-y: auto; max-height: 60px; }
.viewtype02 .pvsum_book { min-width: 0; }
.viewtype02 .pvsum_bookname { overflow: hidden; flex: 1; }
.viewtype02 .pvsum_bookname .chklb { overflow: hidden; max-width: 100%; }
.viewtype02 .pvsum_bookname .chklb_sp { overflow: hidden; flex: 1 1 auto; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.viewtype02 .pvsum_booktotal { border-top: 1px dashed var(--color-line); margin: 16px 0; padding: 20px 0 0 0; }
.viewtype02 .pvsum_total { justify-content: flex-end; font-weight: 600; }
.viewtype02 .pvsum_total .pvsum_sbj { flex: 0 0 4rem; }
.viewtype02 .pvsum_btn { }
.viewtype02 .pvsum_btn > .mybtn { width: 100%; }
.viewtype03 .prdviews { position: relative; display: grid; gap: 60px 40px; grid-template-columns: 1fr 360px; grid-template-areas: "nav nav"; }
.viewtype03 .pvthumb { }
.viewtype03 .pvdet { }
.viewtype03 .pvnavs { grid-area: nav; grid-row: 1 / 2; position: sticky; top: 0px; padding: 20px 0 10px; background-color: #ffffff; z-index: 21; }
.viewtype03 .pvsum { grid-column: 2 / 3; grid-row: 2 / 5; }
.viewtype03 #lecture_list_form { position: sticky; top: 90px; z-index: 11; border-radius: var(--radius-out); border: 1px solid var(--color-line); padding: 14px 24px 24px; background-color: var(--color-bg02); }
.viewtype03 .pvsum_tit { margin: 10px 0 14px 0; font-size: 20px; line-height: 130%; word-break: keep-all; word-wrap: break-word; color: var(--color-emp-bk); }
.viewtype03 .pvsum_unit { display: flex; justify-content: space-between; margin: 4px 0; padding: 4px 0; }
.viewtype03 .pvsum_prc { display: none; }
.viewtype03 .pvsum_prc:has(.prc-org) { display: flex; }
.viewtype03 .pvsum_prc:has(.prc-org) + .viewtype03 .pvsum_prc:has(.prc-cur) { display: flex; }
.viewtype03 .pvsum:has(.pvsum_books) .pvsum_prc { display: flex; }
.viewtype03 .pvsum_books { border-top: 1px dashed var(--color-unfocus); margin-top: 14px; padding-top: 20px; }
.viewtype03 .pvsum_books > .t-h4 { margin-bottom: 10px; font-size: 18px; color: var(--color-emp-bk); }
.viewtype03 .pvsum_booklist { overflow-y: auto; max-height: 24vh; }
.viewtype03 .pvsum_book { min-width: 0; }
.viewtype03 .pvsum_book .pvsum_val { flex: 0 0 94px; text-align: right; }
.viewtype03 .pvsum_book_ness .chklb_bx { opacity: .7; filter: grayscale(.5); }
.viewtype03 .pvsum_bookname { overflow: hidden; flex: 1; }
.viewtype03 .pvsum_bookname .chklb { overflow: hidden; max-width: 100%; }
.viewtype03 .pvsum_bookname .chklb_sp { overflow: hidden; flex: 1 1 auto; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.viewtype03 .pvsum_booktotal { border-top: 1px dashed var(--color-line); margin: 16px 0; padding: 20px 0 0 0; }
.viewtype03 .pvsum_total { flex-wrap: wrap; border-top: 1px solid var(--color-unfocus); margin: 20px 0 0; padding: 20px 0 0; font-weight: 600; }
.viewtype03 .pvsum_total .pvsum_sbj { flex: 0 0 4rem; }
.viewtype03 .pvsum_btn { display: flex; gap: 4px; margin-top: 20px; }
}
@container (min-width: 860px) {
.modeList .coursebx { gap: 30px; }
.modeList .act { flex: 0 0 360px; }
.modeList .act_purchase_picks { flex: 0 0 128px; gap: 16px; justify-content: flex-start; }
}
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 14% { transform: scale(1.15); opacity: 0.7; } 28% { transform: scale(1); opacity: 1; } 42% { transform: scale(1.12); opacity: 0.8; } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }