@charset "utf-8";

@media (max-width: 1400px) {
	.sec2 .inner {padding: 0; padding-right: 30px;}
	.sec2 .inner .txt-box .txt-slide {padding-right: 20px;}
	.sec2 .inner .txt-box .txt p br {display: none;}
	
	.banner .contact a {gap: 50px; padding: 55px 50px 76px;}
}

@media (max-width: 1200px) {
	.sec2 .product {padding-top: 300px;}
	.sec2 .inner .pd-slide {max-width: 360px;}
	.sec2 .inner .txt-box .txt-slide {padding-top: 30px; margin-top: 30px;}
	
	.sec4::after {width: 800px; background-size: 800px auto;}
	
	.banner .contact a {gap: 30px; padding: 55px 30px 76px;}
	.banner .board-box {max-width: 480px;}
}

@media (max-width: 1024px) {
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {left: 15px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {left: 15px;}
	.controls .btn-area {margin-left: 0;}

	.section-header h4 {font-size: 40px;}

	.sec2 .tit h4 {font-size: 38px;}
	.sec2 .tit h5 {font-size: 32px;}
	.sec2 .tit h5 > strong {font-size: 50px;}

	.sec2 .product {padding-top: 200px;}
	.sec2 .inner {gap: 40px; align-items: center;}
	.sec2 .inner .pd-slide {max-width: 280px; padding-bottom: 60px;}
	.sec2 .inner .txt-box .txt-slide {padding-top: 10px;}
	.sec2 .inner .txt-box .txt h5 {font-size: 22px;  padding-left: 15px;}
	.sec2 .inner .txt-box .txt h5::before {left: 0; top: 12px;}
	.sec2 .inner .txt-box .txt p {padding-left: 0; font-size: 16px;}
	.sec2 .inner .txt-box .txt .more {margin-left: 0;}
	
	.sec4::after {width: 600px; background-size: 600px auto;}
	
	.banner {flex-wrap: wrap;}
	.banner .contact {width: 100%;}
	.banner .board-box {display: flex; gap: 10px; max-width: 100%;}
	.banner .board-box a {gap: 30px; padding: 26px 30px;}
	.banner .board-box a ~ a {margin-top: 0;}
}

@media (max-width: 768px) {
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {font-size: 50px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {font-size: 20px; width: calc(100% - 30px); top: 400px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 440px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p br {display: none;}
	
	
	.section-header h4 {font-size: 30px; padding-top: 20px;}
	
	.sec2 .tit {margin-bottom: 200px;}
	.sec2 .tit h4 {font-size: 28px;}
	.sec2 .tit h5 {font-size: 26px;}
	.sec2 .tit h5 > strong {font-size: 35px;}
	.sec2 .tit p br {display: none;}
	
	.sec2 .product {padding-top: 100px;}
	.sec2 .inner {flex-wrap: wrap; flex-direction: column-reverse; padding-right: 0;}
	.sec2 .inner .pd-slide {max-width: 400px;}
	.sec2 .inner .pd-slide .swiper-slide img {margin: 0 auto; display: block;}
	.sec2 .inner .txt-box {width: 100%;}
	.sec2 .inner .txt-box .txt h5 {font-size: 18px;}
	.sec2 .inner .txt-box .txt h5::before {top: 9px;}
	
	.sec3 {padding: 120px 0 150px;}
	.sec3 .certi-box {margin-top: 60px;}
	.sec3 .certi-box .certi figure {max-width: 200px; margin: 0 15px;}
	
	.sec4 {padding: 130px 0 150px;}
	.sec4::after {width: 400px; background-size: 400px auto;}
	.sec4 .container > .map {height: 300px;}
	
	.banner .contact a {padding: 30px;}
	.banner .contact a figure {max-width: 90px;}
	.banner .contact a dl dt {font-size: 26px;}
	.banner .board-box  {flex-wrap: wrap;}
	.banner .board-box a {width: 100%;}
}

@media (max-width: 480px) {
	.m-visual .visual {height: 800px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {font-size: 38px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {top: 360px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 400px;}
	
	.section-header p br {display: none;}
	
	.sec2 .tit h4 {font-size: 24px;}
	.sec2 .tit h5 {font-size: 20px;}
	.sec2 .tit h5 > strong {font-size: 28px;}
	.sec2 .tit h5 br {display: none;}
	
	.sec4::after {width: 300px; background-size: 300px auto;}
	
	.banner .contact a {/* flex-wrap: wrap;  */gap: 15px;}
	.banner .contact a dl {width: 100%;}
	.banner .board-box a dl dt {font-size: 22px;}
	.banner .board-box a {gap: 15px;}
	.banner .board-box a figure {max-width: 45px;}
}