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