@charset "utf-8";
/* CSS Document */

/* 일부 페이지에 사용하는 클래스 모음 */
/* btn-* 버튼 구분용 클래스 */


/* Mobile Device */
@media (max-width : 767px) {
	
	
	/* 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) {
	
  
  
	/* 선생님
-----------------------------------------------------------------------------------------------------------------------------------------*/
  
	/* 선생님 목록 */
	.teacherlist { display: grid; gap: var(--bx-mgap); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); border-top: 1px solid var(--color-theme); padding-top: 30px; }
	.teachbx { flex-direction: column; justify-content: space-between; align-items: center; border-radius: var(--radius-out); border: 1px solid var(--color-line); padding: 40px 20px 20px; background-color: var(--color-bg02); }
	.teachbx_imgbx { flex: 0 0 auto; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; border-radius: 60px; width: 120px; height: 120px; }
	.teachbx_imgbx .icon_user { width: 60px; height: 100px; color: var(--color-unfocus); }
	.teachbx .item_tname { margin: 0; padding: 0; text-decoration: none; font-size: var(--font-l); font-weight: 600; word-break: keep-all; word-wrap: break-word; color: var(--color-emp-bk); }
	.teachbx .item { text-align: center; }
	.teachbx .item > .t-h4 { margin: 4px auto 2px; }
	.teachbx .item_details { justify-content: center; color: var(--color-unfocus); }
	.teachbx .item_details > .item_info { min-height: initial; }
	.shortcut { display: flex; justify-content: center; gap: 0px; margin-top: 10px; }
	.shortcut_a { display: flex; justify-content: center; align-items: center; border-radius: var(--radius-in); width: 40px; height: 40px; color: var(--color-normal); }
	.shortcut_a:hover { background-color: #fff; color: var(--color-theme); }
	.icon_shortcut { width: 20px; height: 20px; }
	
	/* 선생님 상세 */
	.teachv .shortcut { justify-content: flex-start; }
	.teachv_infos + .teachv_infos { margin-top: 100px; }
	.teachv_infos img { max-width: 100%; height: auto; }
	.teachv_title { margin-bottom: 10px; font-size: 24px; font-weight: 600; word-break: keep-all; word-wrap: break-word; line-height: 120%; }
	.teachv_ints { display: flex; justify-content: space-between; gap: 40px; line-height: 150%; }
	.teachv_int { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
	.teachv_int__step { margin-bottom: 10px; font-size: var(--font-l); color: var(--color-unfocus);  line-height: 100%; }
	.teachv_int__name { margin-bottom: 20px; font-size: 38px; font-weight: 400; letter-spacing: -1px; line-height: 120%; }
	.teachv_int__name .t-val { font-weight: 600; }
	.teachv_int_hello { margin-top: 40px; }
	.teachv_profile { flex: 0 0 auto; max-width: 300px; }
	.teachv_prof_imgo { max-width: 100%; }
	
	.teachv_frms { display: flex; flex-wrap: wrap; gap: 2px; }
	.teachv_frm { flex: 1; border-radius: var(--radius-out); padding: 30px; background-color: var(--color-bg02); }
	.teachv_guide { flex: 1 1 100%; }
	.teachv_frm_con { line-height: 160%; }
	
	.teachv_brds { display: flex; flex-wrap: wrap; gap: 100px 40px; }
	.teachv_brd { flex: 1 1 calc( ( 100% - 40px ) / 2); min-width: 0; }
	.teachv_brd_tits { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
	.teachv_int__titx { color: var(--color-unfocus); font-weight: 300; }
	.teachv_brd_list { border-top: 1px solid var(--color-theme); }
	.teachv_brd_unit { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--color-line); }
	.teachv_brd_unit .mylb { flex: 0 0 70px; }
	.teachv_faqs {}
	.teachv_brd__a { overflow: hidden; display: block; padding: 14px 6px;  width: 100%; text-decoration: none; color: var(--color-normal); white-space: nowrap; text-overflow: ellipsis; }
	.teachv_brd__emt { text-align: center; color: var(--color-unfocus); font-weight: 300; }
	.teachv_brd__date { color: var(--color-unfocus); font-weight: 300; }
	.teachv_brd__more { color: var(--color-normal); }
	.teachv_brd__more .icon_more { width: 20px; height: 20px; }
	
	.teachv_courses .cListViewer,
	.teachv_courses .cListRomote,
	.teachv_courses #clct .t-h1,
	.teachv_courses #clct .t-h2 { display: none; }
	.teachv_courses .CBX { padding-top: 0; }


}

@container layoutMain (min-width: 860px) {


	
  }


@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; } }