@charset "utf-8";

@media (max-width: 1500px) {
	article .article-header h4 {left: 75px;}
	
	/* s1 */
	.s1 .arti02 .txt p br {display: none;}
	
	/* s2 */
	.s2 .cnt ul li {min-height: 350px;}
	.s2 .cnt ul li dl dd {font-size: 20px;}
	.s2 .cnt ul li:nth-of-type(3) dl dd {left: 18px;}
}

@media (max-width: 1300px) {
	article .article-header {max-width: 700px; min-height: 160px;}
	article .article-header h4 {left: 15px; font-size: 140px;}
	
	/* s1 */
	.s1 article .txt {padding-right: 100px;}
	.s1 .arti02 .article-header {max-width: 300px;}
	
	/* s2 */
	.s2 .arti02 .article-header {max-width: 1000px;}
}

@media (max-width: 1200px) {
	/* s1 */
	.s1 article .txt h5 {font-size: 35px;}
	.s1 .arti02 .txt {padding-left: 100px;}
	.s1 .arti02 .txt h5 {font-size: 40px;}
	
	/* s2 */
	.s2 .arti02 {padding-top: 390px;}
	.s2 .arti02 .article-header {max-width: 800px; min-height: 300px;}
	.s2 .arti02 .article-header h4 {font-size: 120px;}
	.s2 .inner .tit h5 {font-size: 35px;}
	.s2 .inner .tit h5 strong {font-size: 50px;}
	
	.s2 .cnt ul li dl dd {position: relative !important; margin-top: 30px; left: 0; transform: none; width: 100%;}
	.s2 .cnt ul li:nth-of-type(3) dl dd {left: 0;}
	
	.s2 .note {margin-top: 80px;}
	.s2 .note h5 {font-size: 30px;}
	.s2 .note h5 > br {display: none;}
	
}

@media (max-width: 1024px) {
	article .article-header {max-width: 400px; min-height: 120px;}
	article .article-header h4 {font-size: 100px;}

	/* s1 */
	.s1 article .container .inner {align-items: center;}
	.s1 article .txt {padding-top: 100px; padding-right: 40px;}
	.s1 article .txt h5 {font-size: 28px;}
	.s1 article .txt p {font-size: 20px; text-align: left;}
	
	.s1 .arti02 .txt {padding-top: 0; padding-left: 50px;}
	.s1 .arti02 .txt h5 {font-size: 32px;}
	.s1 .arti02 .txt p {font-size: 20px;}
	
	/* s2 */
	.s2 .arti01 .cnt .item01 {margin-top: 40px;}
	.s2 .arti01 .cnt .item02 {margin-top: 100px;}
	.s2 .arti01 .cnt .item04 {margin-top: 150px;}
	
	.s2 .arti02 {padding-top: 290px;}
	.s2 .arti02 .article-header {max-width: 600px; min-height: 250px;}
	.s2 .arti02 .article-header h4 {font-size: 100px;}
	.s2 .inner .tit {max-width: 380px;}
	.s2 .inner .tit h5 {font-size: 28px;}
	.s2 .inner .tit h5 strong {font-size: 40px;}
	.s2 .inner .txt p {font-size: 20px;}
	
	.s2 .cnt ul {width: calc(100% + 16px); margin: 0 -8px;}
	.s2 .cnt ul li {padding: 0 8px;}
	.s2 .cnt ul li dl dt {border-radius: 50px;}
	
	.s2 .note {padding-top: 60px;}
	.s2 .note span {max-width: 60px; height: 49px;}
	
}


@media (max-width: 768px) {
	article {padding-top: 140px;}
	article .article-header {min-height: 90px; max-width: 300px;}
	article .article-header h4 {font-size: 70px;}
	
	.real-cont {padding: 150px 0 100px;}
	
	/* s1 */
	.s1 {padding: 150px 0 100px;}
	.s1 article ~ article {margin-top: 100px; padding-top: 140px;}
	
	.s1 .arti01 .txt {padding-top: 0; padding-right: 30px;}
	.s1 article .txt h5 {font-size: 22px;}
	.s1 article .txt p {font-size: 16px; }
	.s1 .arti01 .img {max-width: 250px;}
	.s1 .arti01 .img img {height: 600px;}
	
	.s1 .arti02 .article-header {max-width: 100px;}
	.s1 .arti02 .container .inner {flex-wrap: wrap; position: relative; padding-top: 100px;}
	.s1 .arti02 .txt {max-width: 100%; padding: 0;}
	.s1 .arti02 .txt h5 {font-size: 24px;}
	.s1 .arti02 .txt p {font-size: 16px;}
	.s1 .arti02 .img {max-width: 220px; position: absolute; top: -80px; right: 0;}
	
	/* s2 */
	.s2 {padding: 150px 0 100px;}
	.s2 .arti01 {padding-top: 0;}
	.s2 .arti01 .cnt {flex-wrap: wrap;}
	.s2 .arti01 .cnt figure {width: 50%; margin-top: 0 !important;}
	.s2 .arti01 .cnt figure:nth-of-type(2) ~ figure {margin-top: 22px !important;}
	
	.s2 .arti02 {margin-top: 100px; padding-top: 220px;}
	.s2 .arti02 .article-header {max-width: 500px; min-height: 180px;}
	.s2 .arti02 .article-header h4 {font-size: 70px;}
	.s2 .inner {flex-wrap: wrap; gap: 20px;}
	.s2 .inner .tit {max-width: 100%;}
	.s2 .inner .tit h5 {font-size: 22px;}
	.s2 .inner .tit h5 strong {font-size: 30px;}
	.s2 .inner .txt {max-width: 100%;}
	.s2 .inner .txt p {font-size: 16px;}
	
	.s2 .cnt {margin-top: 80px;}
	.s2 .cnt ul {flex-wrap: wrap;}
	.s2 .cnt ul li {width: 50%; min-height: auto;}
	.s2 .cnt ul li:nth-of-type(2) ~ li {margin-top: 16px;}
	.s2 .cnt ul li dl {text-align: center;}
	.s2 .cnt ul li dl dd {display: inline-block; margin-top: 20px; width: auto; text-align: left;}
	
	.s2 .note h5 {font-size: 24px;}
	
	
}

@media (max-width: 580px) {
	section::before {width: 250px; height: 517px; background-size: 250px auto;}

	/* s1 */
	.s1 article .container .inner {position: relative; flex-wrap: wrap;}
	.s1 .arti01 .txt {max-width: 100%; padding: 0;} 
	.s1 article .txt h5 > br {display: none;}
	.s1 article .txt p {margin-top: 30px;}
	.s1 .arti01 .img {max-width: 170px; position: absolute; top: 70px; right: 0; z-index: -1; opacity: .35;}
	.s1 .arti01 .img img {height: 400px;}
	
	.s1 article ~ article {margin-top: 150px;}
	.s1 .arti02 .container .inner {padding-top: 0px;}
	.s1 .arti02 .img {opacity: .35; z-index: -1; top: -120px;}
	
	/* s2 */
	.s2 .arti02 .article-header {max-width: 340px; min-height: 160px;}
	.s2 .arti02 .article-header h4 {font-size: 60px;}
	
	
	.s2 .cnt ul li dl dd {font-size: 16px;}
	.s2 .cnt ul li dl dd::before {top: 8px}
}


@media(max-width: 480px){
	
	section::before {width: 200px; height: 414px; background-size: 200px auto;}

	.s2 .cnt {margin-top: 60px;}
	.s2 .cnt ul li dl dt {border-radius: 30px;}
	.s2 .note {margin-top: 40px;}
	.s2 .note h5 {font-size: 20px;}
	.s2 .note h5 > br {display: block;}
	.s2 .note span {left: 0;}
}