@charset "utf-8";


@media(max-width: 1400px){
	.scroll {right: 15px;}
	
	.sec2 .product {align-items: flex-end;}
	
	.sec3 .inner .section-header {max-width: 580px;}
	.sec3 .inner .scroll-box .box-wrap {width: calc(100% + 50px);}
	.sec3 .inner .scroll-box .box-wrap .box {padding: 0 25px;}
	.sec3 .inner .scroll-box .box-wrap .box ~ .box {margin-top: 150px;}
	.sec3 .inner .scroll-box .box-wrap .box .img-box {padding: 30px 30px 50px; height: 450px;}
	.sec3 .inner .scroll-box .box-wrap .box .img-box ~ .img-box {margin-top: 50px;}
	.sec3 .inner .scroll-box .box-wrap .box .img-box h5 {font-size: 30px;}
}

@media(max-width: 1200px){
	.sec2 .product {gap: 50px;}
	.sec2 .product .info {max-width: 400px;}
	.sec2 .product .img-box figure img {height: 350px;}
	.sec2 .product .info_tab ul li a {min-height: 170px;}
	
	.sec3 .inner .section-header {max-width: 480px;}
	
	.sec4 .gallery .txt {padding: 0 20px;}
}

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

	.m-visual .visual .swiper-wrapper .swiper-slide .container h2 {font-size: 65px;}
	
	.sec2 .product {flex-wrap: wrap; gap: 40px;}
	.sec2 .product .info {max-width: 100%;}
	.sec2 .product .img-box figure img {height: auto;}
	.sec2 .product .info_tab ul li a {min-height: 156px;;}
	
	.sec3 {height: auto; padding-bottom: 180px;}
	.sec3 .inner {flex-wrap: wrap; gap: 40px;}
	.sec3 .inner .section-header {max-width: 100%;}
	.sec3 .inner .scroll-box.pc-scroll {display: none;}
	.sec3 .inner .scroll-box.mo-scroll {display: block;}
	.sec3 .inner .scroll-box .box-wrap {display: flex; width: calc(100% + 30px); margin: 0 -15px;}
	.sec3 .inner .scroll-box .box-wrap .box {width: 33.3333%; padding: 0 15px;}
	.sec3 .inner .scroll-box .box-wrap .box ~ .box {margin-top: 0;}
	.sec3 .inner .scroll-box .box-wrap .box .img-box h5 {font-size: 24px;}
	
	.sec4 .gallery .txt h5 {font-size: 20px;}
	.sec4 .gall-navi {top: 10px;}
}

@media(max-width: 768px){
	.m-visual .visual .swiper-wrapper .swiper-slide.slide01 .backdrop video {object-position: 70% 50%;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {font-size: 24px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container h2 {font-size: 40px; top: 310px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container h2 {top: 350px}
	.m-visual .visual .swiper-wrapper .swiper-slide .container span {font-size: 22px; top: 430px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container span {top: 470px;}
	
	.section-header h3 {font-size: 40px;}
	.section-header p {font-size: 18px;}
	.section-header p br {display: none;}
	
	.sec2 {padding: 100px 0;}
	.sec2 .product .info_txt {margin-top: 30px;}
	.sec2 .product .info_txt h4 {font-size: 30px;}
	.sec2 .product .info_txt p {font-size: 16px;}
	.sec2 .product .info_tab ul li a strong {font-size: 16px;}
	
	.sec3 {padding: 100px 0;}
	.sec3 .inner .section-header {padding-top: 0;}
	.sec3 .inner .scroll-box .box-wrap {flex-wrap: wrap; width: calc(100% + 30px); margin: 0 -15px; gap:0;}
	.sec3 .inner .scroll-box .box-wrap .box {padding: 0 15px; width: 50%;}
	.sec3 .inner .scroll-box .box-wrap .box:nth-of-type(2) ~ .box {margin-top: 30px;;}
	.sec3 .inner .scroll-box .box-wrap .box .img-box {height: 350px;}
	.sec3 .inner .section-header > div a {margin-top: 30px; font-size: 16px;}
	
	.sec3 .inner .scroll-box .box-wrap .box:nth-of-type(2) {order:3;}
	
	.sec4 {padding: 100px 0;}
	.sec4 .gallery .txt {min-height: 120px;}
	.sec4 .gallery .txt h5 {font-size: 18px;/*  height: 65px; */}
	
	.sec5 {padding: 80px 0;}
	.sec5 > .container {flex-wrap: wrap; gap: 20px;}
	.sec5 > .container .section-header {width: 100%;}
	.sec5 .more {width: 180px; height: 180px; margin-left: auto;}
	.sec5 .more::after {background-size: 180px auto;}
}

@media(max-width: 480px){
	.section-header h3 {font-size: 35px;}
	.sec2 .product .info_txt h4 {font-size: 26px;}
	.section-header p {margin-top: 20px;}
	.section-header p br.mo {display: block;}

	.m-visual .visual {height: 800px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {font-size: 20px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container h2 {font-size: 30px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container span {font-size: 18px; top: 400px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container span {top: 440px;}
	.controls {top: 550px;}
	
	.scroll {bottom: 60px;}
	
	.sec2 .product .info_tab ul li a {padding: 20px 0 0; min-height: 140px;}
	.sec2 .product .info_tab ul li a strong {font-size: 14px; line-height: 1.3; margin-top: 15px;}
	.sec2 .product .info_tab ul li a strong.fz16 {font-size: 14px;}
	
	.sec3 .inner .scroll-box .box-wrap .box {width: 100%;}
	.sec3 .inner .scroll-box .box-wrap .box ~ .box {margin-top: 30px;}
	.sec3 .inner .scroll-box .box-wrap .box .img-box {height: 300px;}
	
	.sec4 .gallery {margin-top: 40px;}
	.sec4 .gallery .txt {min-height: 80px; padding: 0 15px;}
	.sec4 .gallery .txt h5 {/* height: 45px;  */font-size: 14px;}
	.sec4 .gallery .txt span {margin-top: 10px;}
	.sec4 .gall-navi { justify-content: right; top: inherit; bottom: -50px;}
	.sec4 .gall-navi .gall-btns {width: 50px; height: 50px;}
	
	.sec5 .more {width: 120px; height: 120px; background-size: 20px auto;}
	.sec5 .more::after {background-size: 120px auto;}
	
}