@charset "utf-8";

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

@media (max-width: 1400px) {
	.product li a {padding: 0 10px;}
	.product li a small {font-size: 20px;}
	.product li a h5 {font-size: 40px; line-height: 45px;}
	.product li a .txt p > br {display: none;}
}

@media (max-width: 1200px) {
	.product li a small {font-size: 18px;}
	.product li a h5 {font-size: 35px; line-height: 40px; padding-top: 10px;}
	.product li a .txt p {font-size: 18px;}
	.product li a .txt span {font-size: 18px; max-width: 160px;}
	.product li a .txt span::after {background-size: 160px auto;}
	
	.sec4 .more {margin-right: 0;}
}

@media (max-width: 1024px) {
	.fp-section.fp-table, .fp-slide.fp-table, .fp-tableCell, .fp-scrollable {height: auto !important;}
	
	/* m-visual */
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {font-size: 55px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {font-size: 22px; top: 450px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 490px;}
	
	.sec2 .product {height: 700px;}
	
	.sec3.fp-section {height: 700px !important; display: flex; flex-direction: column; align-items: center; justify-content: center;}
	.section-header span {font-size: 20px;}
	.section-header h3 {font-size: 35px; margin-top: 20px;}
	.sec4 .inner {height: 450px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
	.sec4 .section-header {padding-top: 0;}
	.sec4 .section-header h3 {font-size: 35px; margin-top: 20px;}
	.sec4 .box {margin-right: 0;}
}

@media (max-width: 768px) {
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {font-size: 38px; top: 330px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container h3 {top: 380px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {font-size: 18px; line-height: 28px;}
	
	.sec2 .product {flex-wrap: wrap; height: auto;}
	.sec2 .product li {width: 100%; height: 500px;}
	.product li a small {font-size: 16px;}
	.product li a h5 {font-size: 26px; line-height: 35px;}
	.product li a .txt p {font-size: 16px;}
	.product li a .txt span {font-size: 16px; max-width: 130px; padding: 0 15px; background-position: calc(100% - 15px) calc(50% + 3px);}
	.product li a .txt span::after {background-size: 130px auto;}
	
	.section-header span {font-size: 18px;}
	.section-header h3 {font-size: 25px;}
	.section-header h3 > br {display: none;}
	.sec3.fp-section {height: 750px !important;}
	.sec3 .about {margin-top: 50px;}
	.sec3 .about ul {flex-wrap: wrap;}
	.sec3 .about ul li {min-height: 200px; width: 50%;}
	.sec3 .about ul li:nth-of-type(2)::after {display: none;}
	.sec3 .about ul li:nth-of-type(2) ~ li {margin-top: 20px;}
	.sec3 .about ul li a dl dt {max-width: 100px;}
	.sec3 .about ul li a dl dd {font-size: 18px; margin-top: 20px;}
	.sec3 .about ul li a span {font-size: 16px; padding: 0 15px; max-width: 130px; background-size: 130px auto; margin-top: 15px;}
	
	.sec4 .section-header span {font-size: 18px;}
	.sec4 .section-header h3 {font-size: 25px;}
	.sec4 .inner > .container {flex-wrap: wrap; gap: 20px;}
	.sec4 .box {width: 120px; height: 120px;}
	.sec4 .more {height: 120px; margin-left: auto; padding: 15px;}
	.sec4 .more > span {font-size: 16px; left: 15px;}
	.sec4 .more > i {right: 15px; top: 15px;}
	.sec4 .box:hover .more > i {top: 20px; right: 20px;}
}

@media (max-width: 480px) {
	.m-visual .visual {height: 800px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {top: 210px; font-size: 36px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container h3 {top: 260px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {top: 360px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 400px;}
	.controls {bottom: 200px; top: inherit;}
	.scroll {bottom: 40px;}
	
	.sec2 .product li {height: 430px;}
	.product li a::after {height: 100%; opacity: .6;}
	.product li a .txt {height: auto; opacity: 1;}
	
	.sec3 .about ul li {min-height: 180px;}
	.sec3 .about ul li a dl dt {max-width: 80px;}
	.sec3 .about ul li a dl dd {font-size: 16px;}

	.sec4 .inner {height: 350px;}
	.sec4 .box {width: 100px; height: 100px;}
	.sec4 .more {height: 100px; padding: 10px;}
	.sec4 .more > i {top: 10px; right: 10px;}
	.sec4 .more > span {bottom: 10px; left: 10px;}
	.sec4 .box:hover .more > i {top: 15px; right: 15px;}
}