@charset "utf-8";

@media (max-width: 1600px) {
	.scroll {left: 15px; bottom: 20px;}
	.controls {bottom: 150px;}
}

@media (max-width: 1400px){
	.sec3 .section-header .img {max-width: 600px;}
	.sec3 .section-header p br {display: none;}
	.sec3 .section-header h4 {font-size: 40px;}
}

@media(max-width: 1200px){
	.sec3 .section-header .img {max-width: 500px;}
}

@media(max-width: 1024px){
	.section-header h3 {font-size: 45px;}
	
	.sec3 .section-header .img {max-width: 350px;}
	.sec3 .section-header p {font-size: 20px;}
	.sec3 .section-header h4 {line-height: 1.3;}
}


@media (max-width: 768px){
	.m-visual .visual .swiper-wrapper .swiper-slide .container .img {top: 240px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container .img {top: 280px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {top: 350px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 390px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container .btn-box {top: 480px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container .btn-box {top: 520px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container .btn-box {flex-wrap: wrap;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container .btn-box a {max-width: 200px; width: 100%;}
	.controls .btn-area {width: 450px;}
	.controls .btn-area .visual-pagination {flex-wrap: wrap;}
	
	.section-header {margin-bottom: 40px;}
	.section-header h3 {font-size: 35px;}
	.section-header p {font-size: 18px;}
	.section-header p > br {display: none;}
	
	.sec3 {padding: 120px 0;}
	.sec3 .section-header ~ .section-header {margin-top: 100px;}
	.sec3 .section-header.sh2 {flex-wrap: wrap; gap: 30px}
	.sec3 .section-header .img {max-width: 100%;}
	.sec3 .section-header .img img {max-width: 180px; width: 100%;}
	.sec3 .section-header h4 {font-size: 30px; margin-top: 20px;}
	.sec3 .section-header p {font-size: 18px; margin-bottom: 40px;}
	
}

@media (max-width: 480px){
	.m-visual .visual .swiper-wrapper .swiper-slide .container .img {max-width: 300px; width: 100%;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {top: 330px; font-size: 20px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p br {display: none;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 370px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container .btn-box a {font-size: 16px; padding: 0 20px; max-width: 160px; line-height: 48px;}
	
	.controls .btn-area {width: 330px;}
	.swiper-pagination-bullet span {font-size: 14px; padding-left: 10px;}
	.swiper-pagination-bullet-active {padding-right: 100px;}
	.controls .btn-area .progress-bar {width: 80px; top: 10%;}
	
	.controls.s1 .btn-area .progress-bar {left: 83px;}
	.controls.s2 .btn-area .progress-bar {left: 168px;}
	.controls.s3 .btn-area .progress-bar {left: 100px; top: 49%;}
	.controls.s4 .btn-area .progress-bar {left: 57px; top: 85%;}
	.controls.s5 .btn-area .progress-bar {left: 155px; top: 85%;}
	
	.btn-box > a {font-size: 16px; padding: 0 20px; line-height: 48px;}
	.btn-box > a::after {right: 20px; width: 35px; background-size: 35px auto;}
	
	.section-header h3 {font-size: 30px;}
	
	.sec3 {padding-top: 80px;}
	.sec3 .section-header h3 br {display: none;}
	.sec3 .section-header h3 br.mo {display: block;}
	.sec3 .section-header .img img {max-width: 120px; width: 100%;}
	.sec3 .section-header h4 {font-size: 28px;}
	
}