@charset "utf-8";

@media (max-width: 1800px) {
	.swiper-box {max-width: 1000px;}
	.slogan {max-width: 100%;}
}

@media (max-width: 1600px) {
	.swiper-box {max-width: 850px;}
	.slogan h2 {font-size: 65px;}
	
	.section-header h3 {font-size: 65px;}
}

@media (max-width: 1400px){
	.swiper-box {max-width: 700px;}
	.slogan {padding-top: 40px;}
	
	.grid-box {min-height: 2400px;}
	
	.pop-up .inner {max-width: 800px; width: 100%;}
}

@media (max-width: 1200px) {
	.swiper-box {max-width: 650px;}
	.slogan h2 {font-size: 60px;}
	.slogan p {font-size: 18px;}
	.controls .btn-area {width: 185px; gap: 15px; justify-content: normal;}
	.controls .btn-area .progress-bar {width: 160px;}
	.controls .btn-area .progress-bar svg {stroke-width: 6px;}
	
	.section-header h3 {font-size: 60px;}
	.section-header p {font-size: 18px;}
}

@media (max-width: 1024px) {
	.m-visual {height: auto;}
	.m-visual .container {flex-wrap: wrap; gap: 40px;}
	.swiper-box {max-width: 100%;}
	.slogan {padding: 0; padding-bottom: 50px;}
	.slogan h2 {padding-bottom: 40px;}
	.slogan h2 > br {display: none;}
	.slogan h2 > br.mo {display: block;}
	.slogan h2::after {max-width: 90%;}
	.slogan p {padding-top: 30px;}
	.controls {bottom: 0; left: 0;}
	
	.grid-box {min-height: 2000px;}
	
	.pop-up .inner {max-width: 600px;}
	.pop-up .inner .close {max-width: 40px; right: -50px;}
}

@media (max-width: 768px) {
	.swiper-box .swiper {height: 550px;}
	.slogan h2 {font-size: 50px;}
	.slogan h2::after {max-width: 70%;} 
	
	.sec2 {margin-top: 100px; padding-bottom: 120px;}
	.section-header h3 {font-size: 50px; line-height: 1.2;}
	
	.grid-box {grid-template-rows: repeat(13, 1fr); min-height: 1500px;}
	.grid03 {grid-column: 1/4; grid-row: 3/5;}
	.grid04 {grid-column: 4/8; grid-row: 3/5;}
	.grid05 {grid-column: 5/8; grid-row: 5/8;}
	.grid06 {grid-column: 1/5; grid-row: 5/8;}
	.grid07 {grid-column: 1/4; grid-row: 8/12;}
	.grid08 {grid-column: 4/8; grid-row: 8/10;}
	.grid09 {grid-column: 4/8; grid-row: 10/12;}
	.grid10 {grid-column: 1/4; grid-row: 12/14;}
	.grid11 {grid-column: 4/6; grid-row: 12/14;}
	.grid12 {grid-column: 6/8; grid-row: 12/14;}
	
	.pop-up .inner {max-width: 450px;}
	.pop-up .inner .close {top: auto; bottom: -50px; right: auto; left: 50%; transform: translateX(-50%);}
	
}

@media (max-width: 480px) {
	.m-visual {padding-top: 100px;}
	.m-visual::before {width: 200px; height: 414px; background-size: 200px auto;}

	.swiper-box {gap: 8px;}
	.swiper-box .swiper {height: 380px;}
	.slogan h2 {font-size: 40px;}
	.slogan p {font-size: 16px;}
	
	.section-header h3 {font-size: 40px;}
	.section-header p {font-size: 16px;}
	
	.grid-box {min-height: 1000px;}
	.pop-up .inner {max-width: 380px;}
	.pop-up .inner .close {max-width: 30px; bottom: -30px;}
}