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

@media (max-width: 768px) {
	/* header */
	#GoTop { display: none!important; }
	header, .header { height: auto; }
	.header h1 { width: 36%; position: absolute; left: 0; top: 20px; }
	.inner { width: 90%; }
	.header .right { display: none; }
	.header > div:nth-child(3) { flex-wrap: wrap; margin-bottom: 20px !important; }
	.header .fixed { position: inherit; }
	.header > div:nth-child(2) {display: none; }

	.login-wrap, .gnb_links{ display: none; }
    .button-container { display: block; right: 1.6rem; top: 76px; }
	.top-gnb .inner { width: 100%; }
	.top-gnb div a { font-size: 11px; }
	.top-gnb div a:nth-child(1) { width: 21%; }
	.top-gnb div a:nth-child(2) { width: 21%; }
	.top-gnb div a:nth-child(3) { width: 17%; }
	.top-gnb div a:nth-child(4) { width: 17%; }
	.top-gnb div a:nth-child(5) { width: 10%; }
	.top-gnb div a:nth-child(6) { width: 14%; }
	.overlay { top: 45px; }
	.keyword { width: 100%; margin: 10px 0 20px; display: flex; flex-wrap: wrap; }
	.keyword a { padding: 3px 10px!important; margin: 3px!important; font-size: var(--font-size-s); }
	.search-box { width: 100%; }
	.search-box form { width: 100%; }
	.search-box form input { width: 80%; }
	.header ul li a { font-weight: 600; font-size: var(--font-size-m); }
	.foot-banner { width: 100%; }
	
	/* visual */
	.main-visual { height: 150px; 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; }
	.swiper-pagination.mb30 { margin-bottom: -10px!important; }
	
	/* common */
	section { padding: 30px 0; }
	.inner2 { width: 90%; }
	.custom-select { width: 100px; padding-top: 10px; }
	.select-selected { font-size: var(--font-size-m); }
	.select-selected:after { top: 17px; }
	.more { padding: 3px 10px; }
	.more span { font-size: var(--font-size-s); }
	.swiper-button-next { margin-right: -30px; }
	.swiper-button-prev { margin-left: -30px; }
	.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); }
	footer { font-size: var(--font-size-s); }
	footer .foot-menu a { margin-right: 10px; padding-right: 10px; line-height: 32px; }
	.text-b { font-size: var(--font-size-l)!important; }
	.text-l { font-size: var(--font-size-m)!important; }
	.text-m { font-size: var(--font-size-s)!important; }
	
	/* main */
	.main-title { margin-bottom: 20px; }
	.main-title h3 { font-size: var(--font-size-title1); }
	.main-title > div { justify-content: flex-start!important; }
	.teacher { display: flex; flex-wrap: wrap; }
	.teacher li { width: 46.9%;  margin-top: 20px; }
	.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); }
	.section-01 h3, .section-02 h3, .section-06 h3 { font-size: var(--font-size-l)!important; margin-bottom: 10px !important; }
	.section-06 h3 { display: flex; }
	.section-06 h3 span { margin-right: 5px; }
	
	.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; }
	.section-03 ul li a span:nth-child(2) { margin-bottom: 5px; }
	.section-03 ul li a span:nth-child(3) { font-size: var(--font-size-m)!important; }
	.section-06 .box5 { height: 230px; }
	.section-06 .box5 span { width: 25%; }
	.section-06 .box5 h4 { width: 25%; text-align: center; }
	.section-06 .box5 div { width: 40%; }
	.section-06 ul li:nth-child(3), .section-06 ul li:nth-child(4) { width: 49%; }
	.section-06 ul li .box3 a span { width: 30%; }
	.section-06 ul li .box3 a h4 { width: 60%; font-size: var(--font-size-l); }
	
	/* sub */
	.sub-visual { height: auto; }
	.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; }
	.view-top { margin-top: 0; flex-wrap: wrap; }
	.view-top .thumb, .view-top .text, .view-top .right { width: 100%; }
	.tab-contents { padding: 0; }
	.lecture-info, .tab-content .swiper, .review { width: 100%; }
	.accordion-header { padding: 10px 0; }
	.accordion-content { padding: 0; }
	.course-tab-instructor, .course-tab-book { flex-wrap: wrap; }
	.course-tab-instructor .t-photo, .course-tab-book .b-photo { width: 100%; margin-bottom: 10px; }
	.course-tab-instructor .t-info, .course-tab-book .b-info { width: 100%; }
	.view-top .text strong { font-size: var(--font-size-l); letter-spacing: -0.04em; }
	.accordion-header { letter-spacing: -0.04em; }
	.list-type-01 ul li { flex-wrap: wrap; }
	.list-type-01 ul li .thumb, .list-type-01 ul li .text, .list-type-01 ul li .right { width: 100%; }
	.list-type-01 ul li .text strong { font-size: var(--font-size-l); letter-spacing: -0.04em; }
	.package-title { margin: 50px 0 30px!important; }
	.package-title h3 { font-size: var(--font-size-b); }
	.package-title p { font-size: var(--font-size-l); }
	.package-title span { font-size: var(--font-size-m); }
	.full-section { padding: 50px 0; }
	.kakao-banner { flex-wrap: wrap; height: auto; }
	.kakao-banner div { width: 100%; }
	.kakao-banner div:nth-child(2) { position: relative; left: 0; top: 0; transform: inherit; padding: 0 20px 20px 20px; }
	.kakao-banner h3 { font-size: var(--font-size-title1); }
	.kakao-banner span, .kakao-banner p { font-size: var(--font-size-m); }
	.kakao-banner a { width: 95%; font-size: var(--font-size-l); margin: 10px auto 0; }
	.group-col3 li { width: 100%; margin: 0 0 30px 0; }
	.group-col3 li span { display: block; text-align: center; }
	.text-title1 { font-size:  var(--font-size-l)!important; }
	.basket-list dl dt, .payment-list dl dt { display: none; }
	.basket-list dl dd, .payment-list dl dd { flex-wrap: wrap; padding: 10px 0; }
	.basket-list input[type="checkbox"], .payment-list input[type="checkbox"] { margin: 0; }
	.basket-list dl dt span, .basket-list dl dd span, .payment-list dl dt span, .payment-list dl dd span { text-align: left; }
	.basket-list dl dd span:nth-child(1) { width: 10%; }
	.basket-list dl dd span:nth-child(2) { width: 90%; }
	.basket-list dl dd span:nth-child(3), .basket-list dl dd span:nth-child(4), .basket-list dl dd span:nth-child(5), .basket-list dl dd span:nth-child(6), .basket-list dl dd span:nth-child(7) { width: 100%; padding-left: 10%; }
	.basket-list dl dd span:nth-child(7) { display: flex; }
	.basket-list dl dd span:nth-child(7) a:nth-child(1) { margin-bottom: 0; margin-right: 5px; }
	.table-02 dl dt { display: none; }
	.table-02 dl dd { flex-wrap: wrap; }
	.table-02 dl dd span { text-align: left; }
	.table-02 dl dd span:nth-child(1) { width: 15%; }
	.table-02 dl dd span:nth-child(2) { width: 85%; }
	.table-02 dl dd span:nth-child(3) { width: 100%; padding-left: 0; }
	.table-02 dl dd span:nth-child(4), .table-02 dl dd span:nth-child(5) { width: 50%; }
	.table-02 dl dd span:nth-child(5) { text-align: right; }
	.find-box { flex-wrap: wrap; }
	.find-box > div { width: 100%; }
	.join-form select { padding: 5px 0; }
	.modal-content .login-form { padding: 20px 0; }
	.modal-content .login-form input[type="text"], .modal-content .login-form input[type="password"] { padding-left: 10px; }
	.payment-list dl dd span:nth-child(1), .payment-list dl dd span:nth-child(2), .payment-list dl dd span:nth-child(3) { width: 100%; }
	.payment-list dl dd span:nth-child(4), .payment-list dl dd span:nth-child(5) {width: 50%; }
	.payment-list dl dd span:nth-child(5) { text-align: right; }
	.pay-means { flex-wrap: wrap; }
	.pay-means div:nth-child(1), .pay-means div:nth-child(2) { width: 100%; }
	.pay-means a { font-size: 12px; }
	.pay-means input[type="text"] { height: 32px; }
	.pay-means span { margin-right: 5px!important; }
	.pay-means div:nth-child(2) { margin-top: 20px; }
	.pay-means div:nth-child(2) dt { display: flex; }
	.pay-means div:nth-child(2) dd { flex-wrap: nowrap; }
	.join-turn dd { padding: 10px 0; font-size: var(--font-size-s); }
	.join-turn dd::after { width: 8px; height: 14px; top: 15px; right: -13px; background-size: 100%; }
	.join-form { }
	.join-form dl dd div:nth-child(1), .join-form dl dd div:nth-child(2), .join-form dl dd div:nth-child(3), .join-form dl dd div:nth-child(4) { width: 100%!important; align-items: center; }
	.join-form dl dd div:nth-child(1) { margin-bottom: 10px; }
	.join-form dl dd span { display: flex; margin-top: 10px; }
	.join-form form dl:nth-child(3) dd:nth-child(1) div:nth-child(2) select { width: 30%; }
	.join-form form dl:nth-child(3) dd:nth-child(1) div:nth-child(2) input { width: 30%; }
	.join-form form dl:nth-child(3) dd:nth-child(2) div:nth-child(2) div { height: 32px; border-radius: 3px; padding: 3px 5px; }
	.join-form form dl:nth-child(3) dd:nth-child(3) div:nth-child(2) div { height: 32px; border-radius: 3px; padding: 3px 5px; }
	.join-form form dl:nth-child(3) div:nth-child(4) dd:nth-child(1) input, .join-form form dl:nth-child(3) div:nth-child(4) dd:nth-child(2) input { width: 100%; }
	.join-form form dl:nth-child(3) div:nth-child(4) dd:nth-child(1) span, .join-form form dl:nth-child(3) div:nth-child(4) dd:nth-child(2) span { font-size: var(--font-size-s); }
	.join-form form dl:nth-child(3) dd:nth-child(5) div:nth-child(2) span { align-items: center; margin-top: 0; }
	.join-form form dl:nth-child(3) dd:nth-child(5) div:nth-child(2) span select, .join-form form dl:nth-child(3) dd:nth-child(5) div:nth-child(2) span input { margin-right: 5px; }
	.join-form form dl:nth-child(3) dd:nth-child(5) div:nth-child(2) span:nth-child(2) select, .join-form form dl:nth-child(3) dd:nth-child(5) div:nth-child(2) span:nth-child(3) select { width: 40px; }
	.join-form form dl:nth-child(3) dd:nth-child(5) div:nth-child(2) div > div { margin-bottom: 0; margin-right: 5px!important; }
	.join-form form dl:nth-child(3) dd:nth-child(6) { }
	.join-form form dl:nth-child(3) dd:nth-child(7) div:nth-child(2) input { width: 45%; }
	.join-form form dl:nth-child(3) dd:nth-child(8) div:nth-child(2) div:nth-child(2) input { width: 100%!important; margin-bottom: 5px; }
	.join-form form dl:nth-child(3) dd:nth-child(8) div:nth-child(2) div:nth-child(3) input { width: 100%!important; }
	.join-form form dl:nth-child(3) dd:nth-child(9) div:nth-child(2) select { width: 30%; }
	.join-form form dl:nth-child(3) dd:nth-child(9) div:nth-child(2) input { width: 30%; }
	
	.join-form form dl:nth-child(5) dd:nth-child(1) div:nth-child(2) input, .join-form form dl:nth-child(5) dd:nth-child(1) div:nth-child(4) input { width: 100%; }
	.join-form form dl:nth-child(5) dd:nth-child(1) div:nth-child(3) { margin: 10px 0; }
	.join-form form dl:nth-child(5) dd:nth-child(2) div:nth-child(2) > div > div, .join-form form dl:nth-child(5) dd:nth-child(2) div:nth-child(4) > div > div { margin-bottom: 0; }
	.join-form form dl:nth-child(5) dd:nth-child(2) div:nth-child(3) { margin: 10px 0; }
	
	.nav-bar { flex-direction: column; }
	.nav-bar ul { margin-top: 20px; margin-bottom: 0!important; }
	.mypage-nav { margin-bottom: 20px; }
	.mypage-nav .nav-bar ul li { margin: 0 20px 0 0; }
	.mypage-nav .nav-bar ul li a { font-size: var(--font-size-m); }
	.mypage-nav .nav-bar ul li::before { height: 17px; left: -11px; }
	.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; }
	.tab-buttons li { padding: 7px 0 3px; }
	.tab-container { margin: 0 auto; }
	.my-class-list .view a { font-size: 12px!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; }
	.youtube_modal iframe { width: 100%; height: 220px; }
	.text-title2 { font-size: var(--font-size-b) !important; }
	.mypage-list dt { display: none; }
	footer .footer_in .policy { flex-wrap: wrap; }
	footer .footer_in .add { font-size: var(--font-size-s); }
	.teacher-list li { width: 100%; margin-right: 0; }
	.lecturer-view .flex { flex-wrap: wrap; }
	.lecturer-view .flex div:nth-child(1), .lecturer-view .flex div:nth-child(1) { width: 100%; }
	.lecturer-view .flex div:nth-child(1) { margin-bottom: 10px; width: 100%!important; margin-right: 0!important; }
	.lecturer-view .flex div h3 { font-size: var(--font-size-m)!important; }
	.lecturer-view .flex div li { font-size: var(--font-size-s); }
	.tab-menu2 { display: none; }
	.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; }
	
	.table-03 dl dt { display: none; }
	.table-03 dl dd { flex-wrap: wrap; }
	.table-03 dl dd span { display: flex; justify-content: flex-start; }
	.table-03 dl dd span:nth-child(1) { }
	.table-03 dl dd span:nth-child(2) { }
	.table-03 dl dd span:nth-child(3) { width: 100%; font-size: var(--font-size-s); color: var(--color-gray-600); }
	
	.inner2 > .inner2, .inner2 > section > .inner2 { width: 100%; padding: 0; }
	
	.le-support div:nth-child(2) { flex-direction: column; }
	.le-support div:nth-child(2) div:nth-child(1) { width: 100%!important; }
	.le-support div:nth-child(2) div:nth-child(2) { width: 100%!important;  margin-top: 20px; }
	.le-support div:nth-child(3) { text-align: center; }
	
	.mypage-list dd div { text-align: left!important; align-items: flex-start!important; }
	.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; }
}