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

@media (max-width: 768px) {
	:root {
	--font-size-s: 13px;
	--font-size-m: 14px;
	--font-size-l: 16px;
	--font-size-b: 20px;
	--font-size-title1: 21px;
	}

	/* header */
	#GoTop { display: none!important; }
	header, .header { height: 64px; }
	.header h1 { width: 36%; position: absolute; left: 15px; top: 50%; }
	.inner, .main-visual .inner { width: 100%; }
	.login-wrap, .gnb_links{ display: none; }
    .button-container { display: block; right: 1.6rem; top: 32px; }
	.foot-banner { width: 100%; }

	/* visual */
	.main-visual { height: 360px; background-position: center; }
	.main-visual div h2 span { font-size: var(--font-size-title1); }
	.main-visual div h2 strong { font-size: var(--font-size-title3); }
	.main-visual div p { font-size: var(--font-size-l); margin-bottom: 30px!important; }
	.main-visual a span { font-size: var(--font-size-m)!important; }

	/* common */
	section { padding: 30px 0; }
	.inner2 { width: 100%; padding: 0 20px; }
	.custom-select { width: 100px; padding-top: 10px; }
	.select-selected { font-size: var(--font-size-m); }
	.select-selected:after { top: 14px; }
	.more { padding: 3px 10px; }
	.more span { font-size: var(--font-size-s); }
	.swiper-button-next { margin-right: -4px; }
	.swiper-button-prev { margin-left: -4px; }
	.customer-center strong { font-weight: 700; font-size: var(--font-size-b); }
	.customer-center span { font-size: var(--font-size-m); }
	.customer-center p { margin-top: 0; margin-bottom: 20px; font-weight: 900; font-size: var(--font-size-title1); }

	/* main */
	.main-title { margin-bottom: 20px; }
	.main-title h3 { font-size: var(--font-size-title1); }
	.main-title > div { justify-content: flex-start!important; }
	.teacher { flex-wrap: wrap; }
	.teacher li { width: 49%;  margin-top: 20px; margin-right: 2%; }
	.teacher li:nth-child(1), .teacher li:nth-child(2) { margin-top: 0; }
	.teacher li:nth-of-type(2n) { margin-right: 0; }
	.board > div { width: 100%; margin-top: 30px; }
	.board > div:nth-child(1) { margin-top: 0; }
	.board h3 { font-size: var(--font-size-title1)!important; }
	.board ul li { font-size: var(--font-size-m); }
	.main-service { flex-wrap: wrap; }
	.main-service li { width: 49%; margin-right: 2%; }
	.main-service li:nth-child(1), .main-service li:nth-child(2) { margin-bottom: 2%; }
	.main-service li:nth-child(2), .main-service li:nth-child(4) { margin-right: 0; }
	.main-service li > div a strong { font-size: var(--font-size-l); }

	.badge-wr { flex-wrap: wrap; }
	.badge-wr li { width: 48%; margin-bottom: 10px; }

	.pc-keyword { display: none; }
	.mo-keyword, .mo-select { display: block; }
	.mo-keyword .select, .mo-select .select { position: relative; border: 1px solid #e1e1e1; float: left; width: 100%; height: 42px; line-height: 42px; background-color: #fff; background-repeat: no-repeat; background-position: 97% 50%; background-image: url(../img/select_arrow.svg); border-radius: 5px; }
	.mo-keyword .select select, .mo-select .select select { width: 100%; height: 42px; line-height: 42px; padding: 0 10px; border: 0; opacity: 0; filter: alpha(opacity=0); font-size: 14px; color: #343434; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
	.mo-keyword .select label, .mo-select .select label { position: absolute; font-size: 15px; color: #343434; top: 0; left: 12px; line-height: 42px; }

	/* sub */
	.sub-visual { height: 140px; }
	.sub-visual div h2 strong { font-size: var(--font-size-title3); }
	.sub-class li { margin: 10px 0 0 0!important; width: 100%; }
	.sub-class li:nth-child(1) { margin-top: 0!important; }

	.modal-content { width: 100%; }
	.modal-content .login-form { padding: 20px 0; }

	.list-type-01 ul li { flex-wrap: wrap; }
	.list-type-01 ul li:nth-child(1) { margin-top: 0; }
	 .list-type-01 ul li .thumb, .list-type-01 ul li .text, .list-type-01 ul li .right { width: 100%; }
	.sub-menu-01 ul, .sub-menu-02 ul { display: none; }
	.sub-menu-01, .sub-menu-02 { overflow: hidden; padding: 10px 0; }
	.list-type-01 ul li .right { align-items: flex-start; }
	.list-type-01 ul li .payment2 em { font-size: var(--font-size-m); }
	.list-type-01 ul li .payment3 a { padding: 7px 30px; }

	.mypage-header > div:nth-child(1) { margin-bottom: 10px; }
	.mypage-menu ul li { margin-right: 20px!important; }
	.mypage-menu ul li a span:nth-child(1) { display: none; }
	.mypage-menu ul li a span { font-size: var(--font-size-m)!important; }

	.mypage-list dd { flex-wrap: wrap; }
	.mypage-list dd > div { width: 100%!important; }
	.mypage-list .fixed > div:nth-child(3), .mypage-list dd > div:nth-child(4) { margin-top: 10px; flex-direction: row;  }
	.mypage-list .fixed > div:nth-child(3) a, .mypage-list dd > div:nth-child(4) a { margin-right: 10px; padding: 3px 10px 5px; }

	.box { padding: 20px; }
	.box span { font-size: var(--font-size-m); }
	.mypage-list dt { display: none; }

	.payment-list > dl:nth-child(1) dt { display: none; }
	.payment-list > dl:nth-child(1) dd:nth-child(2) { border-top: solid 1px var(--color-gray-300); flex-direction: column; }
	.payment-list > dl:nth-child(1) dd:nth-child(2) span { width: 100%!important; text-align: left!important; }
	.payment-list > dl:nth-child(1) dd:nth-child(2) span br { display: none; }
	.payment-list dl dd.total span:nth-child(2) { padding: 0 10px 0 0; }
	.class strong { margin-top: 10px; margin-bottom: 0; }
	.mov li > div > div { width: 100%!important; height: auto!important; }

	.tab-button { font-size: var(--font-size-m); }

	.course-view { flex-wrap: wrap; position: relative; }
	.course-view .left { width: 100%; margin-top: 250px; }
	.course-view .right { width: 100%; position: absolute; left: 0; top: 0; }

	.tab-panel { padding: 10px; }

	.join-form form dl { }
	.join-form form dl dd:nth-child(3) .w90 input { margin-bottom: 5px; }
	.join-form form dl dd:nth-child(5) .w40 select { margin-bottom: 5px; }
	.join-form form dl dd .w10 { width: 30%!important; }
	.join-form form dl dd .w90, .join-form form dl dd .w40 { width: 70%!important; }
	.join-form form dl dd .w40{display:flex;flex-direction:column;align-items:flex-start;}
	.join-turn{ margin: 24px 0 16px; gap: 8px;}
	.join-turn dd{ width: 28%; padding: 10px 0; border-radius: 20px; font-size: 13px; white-space: nowrap;}
	.join-turn dd::after{ width: 14px; height: 20px; right: -18px; background-size: contain;}

	.deposit-guide{margin:1px 0 0 0;white-space:nowrap;font-size:15px;}

	.pay-means{width:100%!important;flex:0 0 100%!important;max-width:100%!important;}
	.pay-means>div:nth-child(1){width:100%!important;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-items:center;}
	.pay-means>div:nth-child(1)>span:first-child{grid-column:1/-1;margin-bottom:6px;}
	.pay-means>div:nth-child(1)>span:not(:first-child){margin-right:0!important;}
	.pay-means a.btn.small.pay{display:block;width:100%;text-align:center;padding:10px 0;font-size:clamp(10px,2.8vw,12px);white-space:nowrap;}

	.tab-contents { padding: 0 0 24px; }
	.right-text-camp { float: none; display: block; margin-top: 4px; margin-bottom: 6px; font-size: 12px; color: #888; }

	.device-list { display: block; }
	.device-item { width: 100%; margin-bottom: 15px; }
	.device-info-box .text-wrap .inquiry-tel { font-size: 13px; padding: 6px 12px; }

	/* 전체를 세로로 */
	.teacher-wrap .flex{ display:flex; flex-direction:column; gap:12px;}
	/* 왼쪽 영역(w30)과 오른쪽(약력) 영역을 모바일에서 100% */
	.teacher-wrap .w30{ width:100% !important; margin-right:0 !important;display:flex;flex-direction:column; gap:10px;order: 2;}
	/* 약력(introduce) 영역 */
	.teacher-wrap .text-l{ width:100% !important;order: 3;}
	/* 이름은 맨 위 */
	.teacher-wrap .text-title2{order: 1;margin-bottom:10px !important;}
	/* 이미지: 가운데 정렬 + 적당한 크기 */
	.teacher-wrap #preview{ display:block;width:95%;max-width:95%;height:auto;margin: 0 auto;border-radius:8px;}
	/* 푸른 소개 박스: 이미지 아래 */
	.teacher-wrap .line-item-blue{display:block;width:95%;}

	.mo-tab-menu { display: flex; }
	.mo-tab { display: none; /* 처음엔 닫힘 */ border: 1px solid #ddd; background: #fff; position: absolute; width: 97.2%; z-index: 100; }
	.mo-tab ul { list-style: none; margin: 0; padding: 0; }
	.mo-tab li a { display: block; padding: 10px; text-decoration: none; color: #333; }
	.mo-tab li a.active, .mo-tab li a:hover { background: #f0f0f0; }
	.tab-select { width: 100%; }
	.tab-select a { display: inline-block; padding: 7px 10px; border: 1px solid #ddd; background: #fafafa; text-decoration: none; color: #333; width: 100%; border-radius: 3px; position: relative; }
	.tab-select a::after { content: "▼"; position: absolute; right: 15px; }

	.tab-menu2 ul { display: block; position: relative; width: 100%; border: 1px solid #ccc; border-radius: 4px; background: #fff; overflow: hidden; }
	.tab-menu2 ul li { display: none; width: 100%; }
	.tab-menu2 ul li a { border: 0; }
	.tab-menu2 ul li:first-child { display: block; }
	.tab-menu2 ul::after { content: "▼"; position: absolute; right: 15px; top: 12px; pointer-events: none; }
	.tab-menu2 ul:active li, .tab-menu2 ul:focus-within li { display: block; }

	.main-list-type-01 ul li, .main-list-type-02 ul li, .section-06 ul li { margin-top: 0; width: 100%; margin-bottom: 30px; }
	.mypage-top { flex-wrap: wrap; margin-bottom: 20px; }
	.mypage-top .mytop-left, .mypage-top .mytop-center, .mypage-top .mytop-right { width: 100%; justify-content: left; }
	.mypage-top .mytop-left .thumb { width: 42px; margin-bottom: 20px; }
	.mypage-top .mytop-left > div { margin-right: 0!important; }
	.mypage-top .mytop-center { border-left: 0; border-right: 0; padding: 0; }
	.mypage-top .mytop-center a { font-size: var(--font-size-m); }
	.mypage-top .mytop-right { display: flex; margin-top: 10px; }
	.mypage-top .mytop-right a { font-size: var(--font-size-m); }
	.mypage-top .mytop-right a br { display: none; }

	.my-class-list table colgroup { display: none; }
	.my-class-list table thead tr th:nth-child(1), .my-class-list table thead tr th:nth-child(4) { display: none; }
	.my-class-list table thead tr th:nth-child(2) { width: 50%; }
	.my-class-list table thead tr th:nth-child(3) { width: 30%; }
	.my-class-list table thead tr th:nth-child(5) { width: 20%; }
	.my-class-list table tbody tr:nth-child(1) td:nth-child(1), .my-class-list table tbody tr:nth-child(1) td:nth-child(4) { display: none; }
	.my-class-list table tbody tr:nth-child(1) td:nth-child(3) { display: table-cell; }
	.my-class-list table tbody tr td:nth-child(3) { display: none; }
	.course-tab-instructor, .course-tab-book { flex-wrap: wrap;}

	.pay-list {
		border-top: 2px solid #333;
	}

	/* 헤더 숨기기 */
	.pay-list dt {
		display: none;
	}

	/* 각 항목을 하나의 카드로 설정 */
	.pay-list dd {
		display: flex;
		flex-direction: column; /* 세로로 쌓기 */
		padding: 15px;
		border-bottom: 1px solid #eee;
		background: #fff;
		gap: 8px; /* 요소 사이 간격 */
	}

	/* 모든 div를 한 줄(row) 형태로 변경 */
	.pay-list dd > div {
		width: 100% !important;
		display: flex !important; /* 가로 배열 */
		justify-content: flex-start; /* 왼쪽 정렬 */
		align-items: flex-start;
		text-align: left !important;
		font-size: 0.9rem;
		margin: 0 !important;
	}

	/* 라벨(항목명) 공통 스타일 */
	.pay-list dd > div:before {
		display: inline-block;
		width: 80px; /* 라벨 너비 고정 */
		min-width: 80px;
		font-weight: bold;
		color: #333;
	}

	/* 각 줄에 라벨 강제 삽입 */
	.pay-list dd div:nth-child(1):before { content: "수강학기"; }
	.pay-list dd div:nth-child(2):before { content: "수강과목"; }
	.pay-list dd div:nth-child(3):before { content: "결제금액"; }
	.pay-list dd div:nth-child(4):before { content: "입금계좌"; }
	.pay-list dd div:nth-child(5):before { content: "결제일자"; }
	.pay-list dd div:nth-child(6):before { content: "처리상태"; }

	/* 과목명 강조 (줄바꿈 허용) */
	.pay-list dd div:nth-child(2) {
		flex-direction: column;
	}
	.pay-list dd div:nth-child(2):before {
		margin-bottom: 4px;
	}
	.pay-list dd div:nth-child(2) a {
		font-weight: bold;
		color: #000;
		display: block;
	}

	/* 상태 표시 색상 강조 */
	.pay-list dd div:last-child span {
		font-weight: bold;
	}

	/* 금액 부분 */
	.pay-list dd div:nth-child(3) strong {
		color: #e53e3e; /* 금액 강조 색상 */
		margin-right: 5px;
	}

}