@charset "utf-8";

@media (max-width: 1800px) {
	.sec2 .section-header {padding-left: 15px;}
	.sec2 .tab {padding-left: 15px; max-width: calc(100% - 800px)}
	.sec2 .bg {max-width: 850px;}
}

@media (max-width: 1600px) {
	.section-header h3 {font-size: 40px;}
	
	.sec2 .tab {max-width: calc(100% - 700px)}
	.sec2 .tab ul {padding-right: 70px;}
	.sec2 .tab ul li .tab-btn {width: 750px;}
	.sec2 .bg {max-width: 750px;}
}

@media (max-width: 1400px) {
	.sec2 .tab {max-width: 100%; width: calc(50% - 20px);}
	.sec2 .tab ul {padding-right: 0;}
	.sec2 .tab ul li .tab-btn {padding: 50px 25px; width: 100%; gap: 20px;}
	.sec2 .tab ul li .tab-btn dl dt {font-size: 32px; max-width: 200px; padding-left: 50px;;}
	.sec2 .bg {width: 50%; max-width: 100%;}
}

@media(max-width: 1200px) {
	.m-visual .visual .swiper-wrapper .swiper-slide .container h2 {top: 240px}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container h2 {top: 280px;}

	.sec5 .notice ul {width: calc(100% + 20px); margin: 0 -10px;}
	.sec5 .notice ul li {padding: 0 10px;}
}

@media (max-width: 1024px) {
	.sec2 .tab ul li .tab-btn {padding: 45px 20px;}
	.sec2 .tab ul li .tab-btn dl {flex-wrap: wrap; gap: 20px;}
	.sec2 .tab ul li .tab-btn dl dt {max-width: 100%; font-size: 26px;}
	.sec2 .tab ul li .tab-btn dl dd {line-height: 1.5; font-size: 18px;}
	
	.sec3 .banner a {padding: 50px;}
	
	.sec4 .about ul {flex-wrap: wrap;}
	.sec4 .about ul li {width: 33.3333%;}
	.sec4 .about ul li:nth-of-type(3) ~ li {margin-top: 20px;}
	
	.sec5 .notice ul li {min-height: 260px;}
	.sec5 .notice ul li a {padding: 30px 20px 35px;}
	.sec5 .notice ul li a span {font-size: 35px;}
	.sec5 .notice ul li a h5 {font-size: 18px; margin-top: 30px;}
}

@media (max-width: 768px) {
	.m-visual .visual .swiper-wrapper .swiper-slide .container h2 {font-size: 45px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {font-size: 20px;}
	.m-visual .visual .swiper-wrapper .swiper-slide.slide01 .backdrop {background-position: 70% 50%;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container h2 {top: 260px}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container h2 {top: 300px;}
	
	.section-header small {font-size: 20px;}
	.section-header h3 {font-size: 30px; margin-top: 20px;}
	
	
	.sec2 {padding: 100px 0 0;}
	.sec .section-header {padding: 0 15px;}
	.sec2 .tab {width: 100%; margin-top: 30px; padding: 0 15px;}
	.sec2 .tab ul li .tab-btn {padding: 30px 20px;}
	.sec2 .tab ul li .tab-btn dl {gap: 10px;}
	.sec2 .tab ul li .tab-btn dl dt {font-size: 22px; background-size: 30px auto;}
	.sec2 .bg {position:static; height: 400px; width: 100%; margin-top: 30px;}
	
	.sec3 {padding: 100px 0;}
	.sec3 .banner {flex-wrap: wrap; gap: 20px;}
	.sec3 .banner a {max-width: 100%; min-height: 250px;}
	.sec3 .banner a h5 {font-size: 30px;}
	.sec3 .banner a p {margin-top: 15px;}
	
	.sec4 {padding: 100px 0;}
	.sec4 .about {margin-top: 30px;}
	.sec4 .about ul li {width: 50%; min-height: 320px;}
	.sec4 .about ul li:nth-of-type(2) ~ li {margin-top: 20px;}
	.sec4 .about ul li a {padding: 40px 0 20px;}
	.sec4 .about ul li a dl dt {max-width: 100px}
	.sec4 .about ul li a dl dd h5 {font-size: 22px;}
	.sec4 .about ul li a dl dd h5 > br.mo {display: block;}
	.sec4 .about ul li a dl dd p {margin-top: 10px;}
	
	.sec5 {padding: 100px 0;}
	.sec5 .notice ul {flex-wrap: wrap;}
	.sec5 .notice ul li {width: 50%; min-height: auto;}
	.sec5 .notice ul li:nth-of-type(2) ~ li {margin-top: 20px;}
	.sec5 .notice ul li a {padding: 30px 15px;}
	.sec5 .notice ul li a span {font-size: 30px;}
	.sec5 .notice ul li a h5 {font-size: 16px; margin-top: 20px; height: 74px;}
	
	.sec6 {padding: 100px 0 150px;}
	.sec6 .section-header > a {top: inherit; bottom: -60px; font-size: 18px; max-width: 150px; padding: 0 20px; line-height: 50px;}
}

@media (max-width: 480px) {
	.m-visual .visual {height: 750px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container h2 {font-size: 40px; top: 200px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container h2 {top: 240px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container h2 > br.mo {display: block;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {top: 320px; line-height: 1.5;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 360px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p > br.mo {display: block;}
	.controls {top: 500px;}
	
	.section-header small {font-size: 18px;}
	.section-header h3 {font-size: 22px;}
	.section-header h3 > br {display: none;}
	
	.sec2 .tab ul li .tab-btn {padding: 20px 15px}
	.sec2 .tab ul li .tab-btn dl dt {font-size: 18px;}
	.sec2 .tab ul li .tab-btn dl dd {font-size: 16px;}
	
	.sec2 .bg {height: 300px;}
	
	.sec3 .banner a {padding: 30px;}
	.sec3 .banner a h5 {font-size: 22px;}
	.sec3 .banner a p {font-size: 18px;}
	
	.sec4 .about ul li {min-height: 280px;}
	.sec4 .about ul li a {padding-top: 40px;}
	.sec4 .about ul li a dl dt {max-width: 80px}
	.sec4 .about ul li a dl dd {margin-top: 20px;}
	.sec4 .about ul li a dl dd h5 {font-size: 20px;}
	.sec4 .about ul li a dl dd p {font-size: 16px; padding: 0 5px;}
	.sec4 .about ul li a dl dd p > br {display: none;}
	
	.sec5 .section-header > a {bottom: inherit; top: 0;}
	.sec5 .notice ul li {width: 100%;}
	.sec5 .notice ul li ~ li {margin-top: 20px;}
	
	.sec6 .section-header > a {right: inherit; left: 0; bottom: -70px;}
}