@charset "utf-8";

@media (max-width: 1600px){
	#fp-nav {right: 15px;}
}

@media (max-width: 1400px){
	.sec2 .cnt ul {width: calc(100% - 50px); gap: 80px;}
}

@media (max-width: 1024px) {
	.fp-section.fp-table, .fp-slide.fp-table, .fp-tableCell, .fp-scrollable {height: auto !important;}
	
	.section {padding: 120px 0;}
	
	.m-visual {padding: 0 !important;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container h2 {font-size: 55px; top: 330px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container h2 {top: 370px;}
	
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {width: calc(100% - 30px);}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p br {display: none;}
	
	.m-visual .visual .swiper-wrapper .swiper-slide .container p ~ p {top: 540px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container p ~ p {top: 580px;}
	
	.section-header {margin-top: 0 !important;}
	.section-header h3 {font-size: 40px;}
	
	.sec2 .cnt ul {width: 100%; gap: 20px;}
	
	.sec4 .cnt ul {gap: 20px;}
	.sec4 .cnt ul li {min-height: 320px;}
	.sec4 .cnt ul li a {padding: 40px 20px;}
	.sec4 .cnt ul li a img {right: 15px;}
	.sec4 .cnt ul li a .txt h5 {font-size: 22px;}
	.sec4 .cnt ul li a .txt p {font-size: 16px;}
}

@media (max-width: 768px){
	.m-visual .visual .swiper-wrapper .swiper-slide .container h2 {font-size: 40px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {top: 390px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 430px;}
	
	.controls.s1 { top: 682px;}
	.controls.s2{ top: 585px;}
	.controls.s3 { top: 642px;}
	.controls.s4 { top: 585px;}
	
	.section {padding: 80px 0 100px;}
	.section-header span {font-size: 20px;}
	.section-header h3 {font-size: 35px;}
	
	.sec2 .cnt ul::after {top: 100px; transform: translateX(-50%);}
	.sec2 .cnt ul li {padding: 20px 10px; min-height: 245px;}
	.sec2 .cnt ul li::after {top: 95px; transform: translateX(-50%);}
	.sec2 .cnt ul li .ico {max-width: 70px;}
	.sec2 .cnt ul li .txt {margin-top: 40px;}
	.sec2 .cnt ul li p {font-size: 16px;}

	.sec3 .section-header p br {display: none;}
	.sec3 .section-header a {font-size: 18px; margin: 40px auto 0; max-width: 180px; line-height: 50px;}
	
	.sec4 .cnt {margin-top: 60px;}
	.sec4 .cnt ul {flex-wrap: wrap;}
	.sec4 .cnt ul li {flex: 1 1 calc(50% - 10px); min-height: 280px;}
	
	.sec5 .flow-wrap {margin-bottom: 60px;}
	.sec5 .flow-wrap .flow a {max-width: 200px; margin-right: 20px;}
}

@media (max-width: 480px){
	.m-visual .visual {height: 800px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container span {font-size: 20px; top: 250px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container span {top: 290px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container h2 {font-size: 34px; top: 300px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container h2 {font-size: 34px; top: 340px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {font-size: 18px; top: 360px}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {font-size: 18px; top: 400px}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p ~ p {top: 530px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container p ~ p {top: 570px;}
	
	.controls.s1 { top: 662px;}
	.controls.s2{ top: 555px;}
	.controls.s3 { top: 612px;}
	.controls.s4 { top: 555px;}
	
	.section-header h3 {font-size: 30px;}
	
	.sec2 .cnt ul {flex-wrap: wrap;}
	.sec2 .cnt ul::after {display: none;}
	.sec2 .cnt ul li {flex: 0 0 calc(50% - 10px); min-height: 215px;}
	.sec2 .cnt ul li::after {display: none;}
	.sec2 .cnt ul li .txt {margin-top: 20px;}
	
	.sec3 .section-header a {font-size: 16px; max-width: 150px;}
	
	.sec4 .cnt ul li {min-height: 200px;}
	.sec4 .cnt ul li a {padding: 30px 15px;}
	.sec4 .cnt ul li a .txt h5 {font-size: 18px;}
	.sec4 .cnt ul li a .txt p {font-size: 16px;}
	
	.sec5 .flow-wrap .flow {padding: 5px 0;}
	.sec5 .flow-wrap .flow a {max-width: 150px; margin-right: 0;}
}