@charset "utf-8";

@media (max-width: 1400px) {
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {font-size: 54px;}
	.scroll {left: 15px;}
}

@media (max-width: 1200px) {
	.card ul li .item .back {padding: 40px 20px 60px 20px;}
}

@media (max-width: 1024px) {
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {font-size: 40px;}
	.section-header h4 {font-size: 50px;}
	
	.card ul li {height: 500px; flex: 0 0 calc(50% - 12px);}
	.card ul li .item .front {padding-bottom: 50px;}
	.card ul li .item .front h5 {font-size: 30px;}
	.card ul li .item .back {padding: 40px 20px;}
	.card ul li .item .back .txt h5 {font-size: 30px;}
	.card ul li .item .back .txt p {font-size: 20px;}
	
	.sec3 h3 {font-size: 40px;}
}

@media (max-width: 768px) {
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {top: 270px; font-size: 34px; width: calc(100% - 15px);}
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 br {display: none;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container h3 {top: 310px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {font-size: 20px; top: 420px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p br {display: none;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 460px;}
	
	.section-header h4 {font-size: 40px;}
	.section-header p {font-size: 18px;}
	
	.sec2 {padding: 100px 0 40px;}
	.card ul li {height: 350px;}
	.card ul li .item .front h5 {font-size: 22px;}
	.card ul li .item .back {padding: 30px 15px;}
	.card ul li .item .back .txt h5 {font-size: 22px;}
	.card ul li .item .back .txt p {font-size: 18px;}
	.card ul li .item .back .txt p br {display: none;}
	.card ul li .item .back a {max-width: 160px; font-size: 16px; padding: 0 15px 0 17px;}
	
	.flow-wrap h3 {font-size: 100px;}
	
	.sec3 h3 {font-size: 28px;}	
	.sec3 p {font-size: 18px;}
	.sec3 .contact {margin-top: 40px;}
	.sec3 .contact > a {line-height: 50px; font-size: 16px;}
}

@media (max-width: 480px) {
	.m-visual .visual {height: 800px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {top: 230px; font-size: 28px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container h3 {top: 270px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {font-size: 18px; top: 380px; width: calc(100% - 30px);}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p br {display: none;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 420px;}
	.scroll {bottom: 50px;}
	
	.section-header h4 {font-size: 30px;}
	.card ul li {flex: 100%; height: 300px;}
	
	.flow-wrap h3 {font-size: 80px;}
	
	.sec3 {padding: 120px 0 100px;}
	.sec3 h3 br {display: none;}
}