@media (max-width: 1600px){
	.sec3 .bg-box {padding-left: 120px;}
}

@media (max-width: 1400px){
	.sec3 .bg-box {padding-left: 15px;}
	.sec3 .bg-box::after {left: 15px;}
	
	.sec4 .benefit ul li h5 br {display: none;}
}

@media (max-width: 1200px){
	.m-visual .visual .swiper-slide .container .banner {top: initial; right: initial; left: 0; bottom: 100px; display: flex; gap: 20px; flex-wrap: Wrap; max-width: 100%; width: calc(100% + 30px); padding: 0 15px;}
	.m-visual .visual .swiper-slide .container .banner dl {width: 1%; flex: 1 1 auto; padding: 25px;}
	.m-visual .visual .swiper-slide .container .banner dl ~ dl {margin-top: 0;}
	
	.sec2 .inner ul li dl {padding: 50px 120px 20px 44px}
	.sec2 .inner ul li dl::after {width: 110px; height: 110px; background-size: 110px auto; right: 10px; transform: scale(.85);}
	.sec2 .inner ul li:hover dl::after {transform: scale(1);}
	
	.sec4 .benefit ul li {padding: 50px 15px 20px;}
	.sec4 .benefit ul li h5 {font-size: 24px;}
	.sec4 .benefit ul li:nth-of-type(1)::after{bottom: -113px;}
	.sec4 .benefit ul li:nth-of-type(2)::after{bottom: -108px;}
	.sec4 .benefit ul li:nth-of-type(3)::after{bottom: -77px;}
	.sec4 .benefit ul li:nth-of-type(4)::after{bottom: -82px;}
	
	.sec5 .step ul {gap: 20px;}
	
	.sec6 .container {padding: 0 50px;}
}	

@media (max-width: 1024px){
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {top: 220px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container h2 {top: 280px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container > p {top: 360px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container .start {top: 480px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container .start {top: 450px;}
/* 	.m-visual .visual .swiper-wrapper .swiper-slide-active .container h3 {top: 220px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container h2 {top: 280px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container > p {top: 360px;} */
	.controls {top: 420px;}
	.m-visual .visual .swiper-slide .container .banner dl dd h5 {font-size: 18px;}
	.m-visual .visual .swiper-slide .container .banner dl {width: auto; flex: 0 0 calc(50% - 10px);}
	
	.section-header h1 {font-size: 40px;}
	.section-header h1 > strong {font-size: 50px;}
	
	.sec2 .advantage h5 {font-size: 30px; padding-left: 120px;}
	.sec2 .advantage h5::before {width: 100px; height: 100px; background-size: 100px auto; top: -17px;}
	.sec2 .advantage p {font-size: 22px;}
	
	.sec2 .inner ul li dl {padding: 35px 30px 120px;}
	.sec2 .inner ul li dl::after {bottom: 10px;}
	.sec2 .inner ul li dl dt {font-size: 20px;}
	.sec2 .inner ul li dl dd {font-size: 24px;}
	.sec2 .inner ul li dl dd > i {font-size: 20px;}
	.sec2 .inner ul li dl dd br {display: none;}
	.sec2 .inner ul li dl dd > small {font-size: 16px; margin-top: 15px;}
	
	.sec3 .bg-box::before {right: 0; font-size: 100px; line-height: 1; top: -84px;}
	.sec3 .bg-box::after {bottom: initial; left: initial; top: 60px; right: 15px; width: 350px; background-size: 350px auto;}
	.sec3 .cnt {flex-wrap: wrap;}
	.sec3 .hi-slide {width: 100%;}
	
	.sec4 .benefit ul {flex-wrap: wrap; gap: 100px 20px;}
	.sec4 .benefit ul li {flex: 0 0 calc(50% - 10px); min-height: 350px;}
	
	.sec5 .step ul {flex-wrap: wrap;}
	.sec5 .step ul li {flex: 0 0 calc(33.333% - 13.5px);}
	.sec5 .step ul li:nth-of-type(2n) {margin-top: 0;}
	
	.sec6 {padding-bottom: 80px;}
	.sec6 .container {padding: 0 15px; gap: 40px;}
	.sec6 figure {max-width: 320px;}
}

@media (max-width: 768px){
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {font-size: 22px; top: 120px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container h2 {font-size: 45px; top: 160px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container > p {font-size: 18px; top: 230px;}
/* 	.m-visual .visual .swiper-wrapper .swiper-slide-active .container h3 {top: 120px;} 
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container h2 {top: 160px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container > p {top: 210px;} */
	.m-visual .visual .swiper-wrapper .swiper-slide .container .start {max-width: 200px; top: initial; bottom: 100px; left: 50%; transform: translateX(-50%);}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container .start {bottom: 60px;}
	.controls {top: 280px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container .start a {line-height: 50px; font-size: 18px;}
	.m-visual .visual .swiper-slide .container .banner {gap: 10px; bottom: 150px;}
	.m-visual .visual .swiper-slide .container .banner dl {flex: 100%; padding: 15px;}
	
	.m-visual .visual .swiper-wrapper .slide01 .backdrop {background-image: url(../images/main/mo-visual01.jpg);}
	.m-visual .visual .swiper-wrapper .slide02 .backdrop {background-image: url(../images/main/mo-visual02.jpg);}
	
	
	.section-header small {font-size: 16px;}
	.section-header h1 {font-size: 24px;}
	.section-header h1 > strong {font-size: 35px;}
	.section-header p {font-size: 18px;}
	
	.sec2 {padding: 100px 0 180px;}
	.sec2 .advantage {margin-top: 60px;}
	.sec2 .advantage h5 {font-size: 24px; padding-left: 0; padding-top: 90px;}
	.sec2 .advantage h5::before {width: 80px; height: 80px; background-size: 80px auto; top: 0; left: 50%; transform: translateX(-50%);}
	.sec2 .advantage h5 br.mo {display: block;}
	.sec2 .advantage h5 > span {margin-top: 5px;}
	.sec2 .advantage h5 > span:nth-of-type(1) {margin-left: 0;}
	.sec2 .advantage p {font-size: 18px;}
	.sec2 .advantage > span {font-size: 16px;}
	.sec2 .advantage h5.fw {padding-top: 0px;}
	
	.sec2 .inner {margin-top: 100px;}
	.sec2 .inner ul li:nth-of-type(1) {flex: 100%;}
	.sec2 .inner ul li {flex: 0 0 calc(50% - 10px); min-height: 230px;}
	.sec2 .inner ul li dl {padding: 35px 15px 120px;}
	.sec2 .inner ul li dl::after {width: 90px; height: 90px; background-size: 90px auto;}
	.sec2 .inner ul li dl dt {font-size: 18px;}
	.sec2 .inner ul li dl dd {font-size: 20px;}
	.sec2 .inner ul li dl dd > i {font-size: 18px; margin-top: 5px;}
	.sec2 .inner ul li dl dd > small {font-size: 16px;}
	
	.sec3 .bg-box::before {font-size: 70px; top: -57px;}
	.sec3 .bg-box::after {bottom: initial; left: initial; top: -55px; right: 15px; width: 200px; background-size: 200px auto;}
	
	.sec4 {padding-top: 100px;}
	.sec4 .benefit ul li {padding: 30px 15px 20px;}
	.sec4 .benefit ul li h5 {font-size: 20px;}
	.sec4 .benefit ul li p.dot {font-size: 18px; margin: 10px 0 0;}
	.sec4 .benefit ul li p.dot br {display: none;}
	.sec4 .benefit ul li p.dot > span {font-size: 16px; display: inline-block;}
	.sec4 .benefit ul li:nth-of-type(1) figure {max-width: 190px;}
	.sec4 .benefit ul li:nth-of-type(1) figure img:nth-of-type(2) {width: 40%; right: 0}
	.sec4 .benefit ul li:nth-of-type(1) figure img:nth-of-type(3) {width: 30%;}
	.sec4 .benefit ul li:nth-of-type(2) figure {max-width: 160px;}
	.sec4 .benefit ul li:nth-of-type(2) figure img:nth-of-type(2) {width: 40%; top: 15px; right: 10px;}
	.sec4 .benefit ul li:nth-of-type(3) figure {max-width: 130px;}
	.sec4 .benefit ul li:nth-of-type(3) figure img:nth-of-type(2) {width: 40%; top: 0;}
	.sec4 .benefit ul li:nth-of-type(4) figure {max-width: 140px;}
	.sec4 .benefit ul li:nth-of-type(4) figure img:nth-of-type(2),
	.sec4 .benefit ul li:nth-of-type(4) figure img:nth-of-type(3) {width: 30%; top: 15px;}
	
	
	.sec5 .step {margin-top: 40px;}
	.sec5 .step ul li {flex: 0 0 calc(50% - 10px); padding: 35px 20px 40px; min-height: auto;;}
	.sec5 .step ul li figure {max-width: 120px;}
	.sec5 .step ul li dl {margin-top: 15px;}
	.sec5 .step ul li dl dt > strong {font-size: 20px;}
	.sec5 .step .more {max-width: 200px; line-height: 50px; font-size: 18px; margin-top: 50px;}
	
	.sec6 {padding-bottom: 0px; padding-top: 100px;}
	.sec6 .container {flex-wrap: wrap;}
	.sec6 figure {max-width: 100%; padding-top: 0;}
	.sec6 .section-header > a {max-width: 200px; line-height: 50px; font-size: 18px; margin-top: 40px;}
}

@media (max-width: 480px){
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {font-size: 20px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container h2 {font-size: 32px; /* top: 180px; */}
	.m-visual .visual .swiper-wrapper .swiper-slide .container > p {top: 210px;}
/* 	.m-visual .visual .swiper-wrapper .swiper-slide .container > p {top: 230px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container h2 {top: 220px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container > p {top: 270px;} */

	.section-header small {font-size: 14px;}
	.section-header h1 {font-size: 20px;}
	.section-header h1 > strong {font-size: 26px;}
	.section-header p {font-size: 16px;} 
	.section-header h4 {margin-top: 10px; font-size: 30px; font-weight: 300; line-height: normal; color: #333; letter-spacing: -1px;}
	.section-header h4 > strong {font-size: 35px; font-weight: 700; letter-spacing: -1.2px; display: block; overflow: hidden;}
	.sec2 .advantage {padding: 40px 15px;}
	.sec2 .advantage h5 {font-size: 22px;}
	.sec2 .advantage p {font-size: 16px; margin-top: 30px;}
	.sec2 .advantage > span {font-size: 14px;}
	
	.sec2 .inner ul {gap: 10px;}
	.sec2 .inner ul li {flex: 100%; min-height: auto;}
	.sec2 .inner ul li figure img:nth-of-type(2) {top: 20px; right: 10px;}
	.sec2 .inner ul li dl {padding:35px 80px 35px 15px;}
	.sec2 .inner ul li dl::after {width: 70px; height: 70px; background-size: 70px auto; transform: scale(1);}
	.sec2 .inner ul li dl dt {font-size: 16px;}
	.sec2 .inner ul li dl dd {font-size: 18px;}
	.sec2 .inner ul li dl dd > i {font-size: 16px;}
	.sec2 .inner ul li dl dd > small {font-size: 14px; margin-top: 5px;}

	.sec3 .bg-box::before {font-size: 55px; right: 15px; top: -47px;}
	.sec3 .bg-box::after {width: 160px; background-size: 160px auto; height: 150px; top: 70px;}
	.sec3 .hi-slide .swiper-slide dl {padding: 30px 15px;}
	.sec3 .hi-slide .swiper-slide dl dt {font-size: 18px;}
	.sec3 .hi-slide .swiper-slide dl dd {font-size: 16px; margin-top: 10px;}
	
	.sec4 .benefit ul {gap: 100px;}
	.sec4 .benefit ul li {flex: 100%; min-height:  auto; padding-bottom: 60px;}
	.sec4 .benefit ul li h5 {font-size: 18px;}
	.sec4 .benefit ul li p.dot {font-size: 16px;}
	.sec4 .benefit ul li:nth-of-type(4) figure {bottom: -90px;}
	.sec4 .benefit ul li p.dot > span > br.mo {display: block;}	
	
	/* .sec5 .step ul li {flex: 100%; border-radius: 50px;} */
	.sec5 .step {}
	.sec5 .step ul {flex-wrap: nowrap; overflow: auto; padding-bottom: 20px;}
	.sec5 .step ul li {max-width: 200px; flex: none; width: 100%; min-height: 320px;}
	.sec5 .step ul li figure {max-width: 100px;}
	.sec5 .step ul li dl dt > strong {font-size: 18px;}
	.sec5 .step ul li dl dt {font-size: 16px;}
	.sec5 .step ul li dl dd {font-size: 16px;}
}