@charset "utf-8";

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

@media (max-width: 1400px) {

}

@media (max-width: 1200px) {
	.sec2 .business ul li {min-height: 300px;}
	.sec2 .business ul li a h5 {font-size: 26px;}
	
	.sec4 .banner ul {width: calc(100% + 20px); margin: 0 -10px;}
	.sec4 .banner ul li {padding: 0 10px;}
	.sec4 .banner ul li a {padding: 45px 20px 0;}
}

@media (max-width: 1024px) {
	.sec2 .business ul {width: calc(100% + 20px); margin: 0 -10px;}
	.sec2 .business ul li {width: 33.3333%; padding: 0 10px;}
	.sec2 .business ul li:nth-of-type(3) ~ li {margin-top: 20px;}

	.sec4 .banner ul li a h5 {font-size: 26px;}
	.sec4 .banner ul {flex-wrap: wrap;}
	.sec4 .banner ul li {width: 33.3333%; min-height: 200px;}
	.sec4 .banner ul li:nth-of-type(3) ~ li {margin-top: 40px;}
	
	.sec5 .certi-box .certi {min-height: 280px;}
	.sec5 .certi-box .certi a {padding:40px 30px 0;}
	.sec5 .certi-box .certi a h5 {font-size: 30px;}
	.sec5 .certi-box .certi a::after {bottom: 30px; right: 30px;}

}

@media (max-width: 768px) {
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {font-size: 50px; top: 350px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container h3 {top: 400px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {top: 420px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 470px;}
	
	section {padding: 80px 0 100px;}
	.section-header h3 {font-size: 40px;}
	.section-header p {font-size: 18px; padding-top: 15px; line-height: 28px;}
	
	.sec2 .business {margin-top: 50px;}
	.sec2 .business ul li {width: 50%; min-height: 250px;}
	.sec2 .business ul li:nth-of-type(2) ~ li {margin-top: 20px;}
	.sec2 .business ul li a h5 {font-size: 22px;}
	.sec2 .business ul li a span {width: 55px;}
	.sec2 .business ul li a:hover span {margin-top: 20px;}
	
	.sec3 .section-header {padding-bottom: 30px; margin-bottom: 50px;}
	.sec3 .section-header a { right: inherit; left: 0; font-size: 16px; bottom: 0;}
	.partner .partner-slide {margin: 0 30px;}
	/* .simply-scroll .simply-scroll-list li {margin: 0 20px;} */
	
	
	.sec4 .banner ul li {width: 50%;}
	.sec4 .banner ul li:nth-of-type(2) ~ li {margin-top: 20px;}
	.sec4 .banner ul li a h5 {font-size: 22px; line-height: 28px;}
	.sec4 .banner ul li a:hover {transform: translateY(0);}
	
	.sec5 .section-header h3 {font-size: 35px;}
	.sec5 .certi-box {flex-wrap: wrap; gap: 20px; margin-top: 50px;}
	.sec5 .certi-box .certi {width: 100%; min-height: 200px;}
	.sec5 .certi-box .certi a h5 {font-size: 24px;}
	.sec5 .certi-box .certi a span {margin-top: 30px; width: 55px; height: 55px; background-size: 55px auto;}
	.sec5 .certi-box .certi a::after {width: 80px; background-size: 80px auto;}
	
	.sec6 {padding: 80px 0 100px;}
	.sec6 .facility .inner {height: 300px; padding: 50px 40px; position: relative;}
	.sec6 .facility .inner::before {position: absolute; content:''; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0, 0.15); z-index: 0;}
	.sec6 .facility h3 {font-size: 35px; position: relative; z-index: 1;}
	.sec6 .facility p {z-index: 1; position: relative;}
	.sec6 .facility .inner > span {bottom: 50px; right: 40px; z-index: 1;}
}

@media (max-width: 480px) {
	.m-visual .visual {height: 830px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {top: 250px; font-size: 45px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container h3 {top: 300px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {top: 320px; font-size: 18px; line-height: 30px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 370px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p > br.mo {display: block;}
	.controls {bottom: 250px;}
	
	.section-header h3 {font-size: 30px;}
	
	.sec2 .business ul {width: calc(100% + 10px); margin: 0 -5px;}
	.sec2 .business ul li {width: 50%; padding: 0 5px; min-height: 180px;}
	.sec2 .business ul li:nth-of-type(2) ~ li {margin-top: 10px;}
	.sec2 .business ul li a h5 {font-size: 18px;}
	.sec2 .business ul li a span {width: 45px;}
	.sec2 .business ul li a:hover span {margin-top: 15px;}
	
	.partner01 {margin-bottom: 40px;}
	
	.sec4 .banner ul li {min-height: 150px;}
	.sec4 .banner ul li a {padding: 30px 15px;}
	
	.sec5 .section-header h3 {font-size: 28px;}
	.sec5 .section-header p {font-size: 18px; padding-top: 15px;}
	.sec5 .certi-box .certi a {padding: 30px;}
	.sec5 .certi-box .certi a h5 {font-size: 22px;}
	
	.sec6 .facility .inner {height: 250px; padding: 35px 20px;}
	.sec6 .facility h3 {font-size: 28px;}
	.sec6 .facility p {font-size: 18px; padding-top: 10px;}
	.sec6 .facility .inner > span {bottom: 35px; right: 20px; font-size: 16px;}
}