@charset "utf-8";

@media (max-width: 1600px) {
	#fp-nav {left: 15px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {left: 40px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container h2 {left: 40px;}
	.controls {padding-left: 55px;}
	
	
}

@media (max-width: 1200px) {
	.sec2 .inner .item h5 {font-size: 35px;}
	.sec2 .inner .item p {font-size: 20px; padding: 0 15px;}
	
	.sec3 .cases a .txt h5 {font-size: 20px;}
	
	.sec4 .product a {padding: 25px 15px 30px; min-height: 460px;}
	.sec4 .product a .txt h5 {font-size: 20px;}
	.sec4 .product a .txt .hashtag {margin-top: 20px;}
	
	.sec5 .tab {max-width: 500px;}
	.sec5 .tab > a {padding: 50px;}
	.sec5 .tab > a::after {bottom: 50px; right: 50px;}
}

@media (max-width: 1024px) {
	.section-header h3 {font-size: 45px;}
	.section-header p {font-size: 20px;}

	.fp-section.fp-table, .fp-slide.fp-table, .fp-tableCell, .fp-scrollable {height: auto !important;}
	
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {font-size: 20px; left: 15px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container h2 {font-size: 50px; left: 15px;}
	.controls {padding-left: 15px;}
	
	.sec2 .inner .item {height: 100dvh;}
	.sec2 .inner .item p > br {display: none;}
	
	.sec3 {padding: 120px 0 150px;}
	
	.sec4 {padding: 120px 0 150px;}
	
	.sec5 .container {height: 100dvh;}
	.sec5 .section-header p {max-width: 365px;}
	.sec5 .tab {max-width: 350px;}
	.sec5 .tab > a {padding:50px 30px;}
	.sec5 .tab > a::after {bottom: 50px; right: 30px;}
	.sec5 .tab > a .ico {max-width: 60px;}
	.sec5 .tab > a h4 {font-size: 35px; margin-top: 20px;}
	
	.sec6 .container {height: 100dvh;}
	
	/* .q-banner {top: 25%;}
	.q-banner a {gap: 0; padding: 30px;}
	.q-banner a h5 {display: none;}
	.q-banner a .txt {display: none;}
	.q-banner a span {display: none;} */
}

@media (max-width: 768px) {
	
	.section-header h3 {font-size: 38px; margin-top: 20px;}

	.m-visual .visual .swiper-wrapper .swiper-slide .container h2 {font-size: 45px;}
	.scroll {right: 15px;}
	
	.sec2 .inner {flex-wrap: wrap;}
	.sec2 .inner .item {height: 350px; width: 100%;}
	.sec2 .inner .item h5 {font-size: 30px;}
	.sec2 .inner .item p {font-size: 18px; margin-top: 30px;}
	.sec2 .inner .item span {width: 60px;}
	.sec2 .inner .item:hover span {margin-top: 30px;  height: 60px;}
	
	.sec3 {padding: 100px 0;}
	.sec3 .cases a .img-box::after {right: -15px;}
	.sec3 .cases a .txt {margin-top: 20px;}
	.sec3 .cases a .txt h5 {font-size: 18px;}
	.sec3 .cases a .txt .date {font-size: 14px; margin-top: 20px;}
	
	.control-btns {width: 170px; gap: 10px}
	.control-btns .btns {width: 110px;}
	.control-btns .btns .case-btn {width: 50px; height: 50px;}
	.control-btns .more {width: 50px; height: 50px;}
	
	.sec4 {padding: 100px 0;}
	.sec4 .product a {min-height: 435px;}
	.sec4 .product a .txt h5 {font-size: 18px;}
	.sec4 .product a .txt p {font-size: 16px; margin-top: 10px;}
	.sec4 .product a .txt .hashtag {margin-top: 10px;}
	.sec4 .product a .txt .hashtag span {line-height: 26px;}
	.control-btns .btns .product-btn {width: 50px; height: 50px;}
	
	.sec5 {padding: 100px 0;}
	.sec5 .section-header p {max-width: 100%;}
	.sec5 .container {padding-top: 0; height: 400px;}
	.sec5 .tab {max-width: 100%; display: flex; top: inherit; bottom: 0; height: 200px;}
	.sec5 .tab > a {width: 50%; height: 100%; padding: 40px 20px;}
	.sec5 .tab > a::after {bottom: 40px; right: 20px; width: 50px; height: 50px;}
	.sec5 .tab > a h4 {font-size: 28px;}
	
	.sec6 {padding: 100px 0;}
	.sec6 .section-header h3 {color: #fff}
	.sec6 .section-header p {color: #fff;}
	
	.sec6 .container {height: auto; padding-top: 0;}
	.sec6 .container .more2 {width: 200px; height: 200px; margin-top: 40px;}
	.sec6 .container .more2::after {background-size: 200px auto;}
	
	
}

@media (max-width: 480px) {
	.section-header h3 {font-size: 32px;}
	.section-header p {font-size: 18px;}

	.m-visual .visual {height: 800px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {top: 280px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p .mo {display: block;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 320px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container h2 {font-size: 30px; top: 350px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container h2 {top: 390px;}
	
	.scroll {width: 90px; height: 90px; bottom: 50px;}
	.scroll::after {background-size: 90px auto;}
	
	.controls {bottom: 180px;}
	.control-btns {bottom: -10px;}
	
	.sec4 .product a {padding: 15px 10px 20px; min-height: 360px;}
	.sec4 .product a .txt {padding: 0;}
	.sec4 .product a .txt p {height: 50px;}
	.sec4 .product a .txt .hashtag span {font-size: 12px;}
	
	.sec5 {position: relative;}
	.sec5 .section-header {position: relative; z-index: 1;}
	.sec5 .section-header h3 {color: #fff;}
	.sec5 .section-header p {color: #fff;}
	.sec5::before {position: absolute; content:''; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0, .15); z-index: 0;}
	.sec5 .tab > a {padding: 20px;}
	.sec5 .tab > a::after {width: 45px; height: 45px; bottom: 20px; right: 20px;}
	.sec5 .tab > a .ico {max-width: 50px;}
	.sec5 .tab > a h4 {font-size: 22px;}
	
	.sec6 .container .more2 {width: 150px; height: 150px; margin-top: 20px;}
	.sec6 .container .more2::after {background-size: 150px auto;}
	.sec6 .section-header p br {display: none;}
	
	
}