@charset "UTF-8";

@media (max-width: 768px) {
	section { padding: 1.875rem 0; }
	.header, .footer { width: 100%; margin: inherit; }
	.header { padding: 0.9375rem; }
	.header h1 { width: 9.375rem; height: 1.875rem; }
	section > .inner { width: 90%; margin: 0 auto; }
	section h2 { font-size: var(--fs-24); margin-bottom: 1.25rem; width: 100%; }
		
	.nav { display: none; }
	.hamburger { display: block; cursor: pointer; width: 24px; height: 24px; background: url("../img/icon-hamburger.svg") no-repeat; color: var(--color-whi); }
	.hamburger.active { background: url("../img/icon-hamburger-on.svg") no-repeat; }
	.mobile-nav { display: block; position: fixed; top: 0; left: -250px; /* 기본은 숨김 (화면 밖) */ width: 250px; height: 100%; background: #222; overflow-y: auto; transition: left 0.3s ease; padding-top: 60px; z-index: 999; }
	.mobile-nav a { display: block; padding: 15px 20px; color: #fff; text-decoration: none; border-bottom: 1px solid #444; }
	.mobile-nav a:hover { background: #444; }
	.mobile-nav.open { left: 0; }
	
	/*=================================================================================
	* main
	=================================================================================*/
	.visual { background: url("../img/mo-visual.svg") no-repeat; height: 520px; background-size: 100%; }
	.visual .inner { width: 100%; height: 100%; margin: 0 auto; position: relative; }
	.visual .text { position: absolute; left: 45%; top: 35%; transform: translate(-50%, -50%); }
	.visual .text h2 span { display: block; }
	.visual .text h2 .t1 { width: 8.875rem; margin-bottom: 0; }
	.visual .text h2 .t2 { width: 16.25rem; }
	.visual .text h2 .t3 { width: 6.25rem; }
	.visual .text p { width: 15rem; margin-bottom: 0.625rem; }
	
	.info p:nth-child(2), .metods p:nth-child(2), .event p:nth-child(2) { font-size: var(--fs-18); margin-bottom: 0.625rem; }
	.info p:nth-child(3), .metods p:nth-child(3) { font-size: var(--fs-16); }
	.info-list div { margin-right: 4%!important; width: 48%; padding: 5%; }
	.info-list div:nth-last-of-type(2n) { margin-right: 0!important; }
	.info-list div h3 { font-size: var(--fs-16); }
	.info-list div span { font-size: var(--fs-13); }
	.info-list div .thumb { display: block; width: 46px; }
	.info-list div .thumb svg { width: 100%; }
	
	.metods-list div { width: 48%; margin-right: 4%; margin-bottom: 0.625rem; justify-content: flex-start; }
	.metods-list div:nth-child(2) { margin-right: 0; }
	.metods-list div:nth-child(3) { margin-bottom: 0; }
	.metods-list div strong { font-size: var(--fs-14); margin-bottom: 0.625rem; }
	.metods-list div a { padding: 0.3125rem 1.875rem; }
	
	.company-list div { width: 100%; margin-right: 0; margin-bottom: 0.625rem; align-items: flex-start; padding: 5%; }
	.company-list div strong { font-size: var(--fs-16); }
	
	.event-list div { width: 48%; margin-right: 4%; margin-bottom: 0.625rem; justify-content: flex-start; padding: 5%; }
	.event-list div:nth-of-type(2n) { margin-right: 0; }
	.event-list div h3 { font-size: var(--fs-16); }
	.event-list div span { font-size: var(--fs-13); }
	.event-list div .thumb { display: block; width: 46px; }
	.event-list div .thumb svg { width: 100%; }
	
	.benefit .box-01 > div { width: 100%; margin-bottom: 0.3125rem; }
	.benefit .box-01 > div:nth-child(4) { margin-bottom: 0; }
	.benefit .box-01 > div .thumb { text-align: center; }
	.benefit .box-01 > div .thumb img { width: 60%; }
	.benefit .box-01 { flex-direction: column; }
	
	.benefit .box-02 { flex-direction: column; }
	.benefit .box-02 > div { width: 100%; margin-bottom: 0.9375rem; }
	.benefit .box-02 > div:nth-child(5) { margin-bottom: 0; }
	
	.benefit .app-btn-wr a { font-size: var(--fs-16); }
	
	.post { display: flex; flex-direction: column; }
	.post .down
	.post .down a { display: flex; align-items: center; font-weight: 800; font-size: var(--fs-16); }
	.post .btn {  }
	.post .text { font-size: var(--fs-14); margin: 20px 0 50px; }
}