@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; }
	.pay-means > div:nth-child(1) { width: 100%; }
	
	.tab-contents { padding: 0 0 24px; }
}