@charset "utf-8";

@media(max-width: 1800px){
	.scroll {right: 15px;}
}

@media (max-width: 1600px){
	.sec2 .inner {gap: 60px;}
	.sec2 .inner .img-box .txt p > br {display: none;}
}

@media (max-width: 1400px){
	.sec3 .company {padding: 0;}
	.sec3 .company ul {width: calc(100% + 50px); margin: 0 -25px;}
	.sec3 .company ul li {padding: 0 25px;}
	.sec3 .company ul li a p {padding: 0 25px; background-position: calc(100% - 25px) 50%;}
}

@media(max-width: 1200px){
	.section-header h3 {font-size: 60px;}
	.section-header p {font-size: 22px; line-height: 1.5;}

	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {font-size: 65px;}
	
	.sec2 .inner .tab-box {max-width: 360px;}
	.sec2 .inner .img-box .txt {padding: 0;}
}

@media(max-width: 1024px){
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {font-size: 55px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 > br {display: none;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {font-size: 22px; line-height: 1.6;}
	
	.sec2 .inner {flex-wrap: wrap;}
	.sec2 .inner .tab-box {max-width: 100%;}
	.sec2 .inner .tab ul {display: flex; gap: 30px;}
	.sec2 .inner .tab ul li {max-width: 200px;}
	.sec2 .inner .img-box {max-width: 100%;}
	
	.sec3 .company ul {width: calc(100% + 30px); margin: 0 -15px;}
	.sec3 .company ul li {padding: 0 15px; min-height: 400px;}
	.sec3 .company ul li a p {font-size: 30px; top: 40px;}
	.sec3 .company ul li a:hover p {top: 320px;}
}

@media(max-width: 768px){
	.section-header h3 {font-size: 45px;}
	.section-header p {font-size: 20px; padding-top: 20px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 > br.mo {display: block;}
	
	.sec2 {padding-top: 120px;}
	.sec2 .inner .tab {margin-top: 40px;}
	.sec2 .inner .tab ul {gap: 15px;}
	.sec2 .inner .tab ul li a {font-size: 18px; padding: 20px 0;}
	
	.sec2 .inner .img-box {min-height: 440px;}
	.sec2 .inner .img-box .img {height: auto;}
	.sec2 .inner .img-box .txt {top: 280px;}
	.sec2 .inner .img-box .txt h4 {font-size: 30px;}
	.sec2 .inner .img-box .txt p {font-size: 18px; padding-top: 20px;}
	
	.sec3 {padding-top: 100px;}
	.sec3 .company {margin-top: 60px;}
	.sec3 .company ul {flex-wrap: wrap;}
	.sec3 .company ul li {width: 100%; transform: translateY(0) !important;}
	.sec3 .company ul li ~ li {margin-top: 20px;}
	.sec3 .company ul li a p {font-size: 22px;}
	
	.sec3 .office {margin-top: 100px;}
	.sec3 .office ul {flex-wrap: wrap;}
	.sec3 .office ul li {flex: none !important; width: 100%; filter: brightness(1);}
	.sec3 .office ul li h5 {opacity: 1;}
	
	.sec4 {padding: 120px 0 80px;}
	.sec4 .inquiry {flex-wrap: wrap; gap: 20px;}
	.sec4 .inquiry .inquiry-btn {max-width: 120px; height: 120px; background-size: 20px auto;}
	.sec4 .inquiry .inquiry-btn::before {width: 120px; height: 120px; background-size: 120px auto;}
}

@media(max-width: 480px){
	.section-header h3 {font-size: 32px;}

	.m-visual .visual {height: 800px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {font-size: 43px; top: 200px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container h3 {top: 240px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {font-size: 18px; top: 380px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 420px;}
	.controls {top: auto; bottom: 150px;}
	
	.sec2 .inner .tab ul {flex-wrap: wrap;}
	.sec2 .inner .tab ul li {max-width: auto; width: 47%;}
	
	.sec2 .inner .img-box .txt {top: 220px;}
	.sec2 .inner .img-box .txt h4 {font-size: 24px;}
	.sec2 .inner .img-box .txt p {font-size: 16px; padding-top: 20px;}
	
	.sec3 {padding-top: 60px;}
	.sec3 .office ul li {min-height: 400px;}
	.sec3 .office ul li h5 {font-size: 24px; bottom: 50px; left: 50%; transform: translateX(-50%);}
}