@charset "utf-8";

@media (max-width: 1600px){

}

@media (max-width: 1400px){
	.s1_1 article .txt p > br {display: none;}
	
	/* s1_2 */
	.s1_2 .purpose ul li dl {padding: 50px 30px;}
	.s1_2 .purpose ul li dl dd > br {display: none;}
	
	/* s1_3 */
	.history-wrap.history-fixed .year h4 {padding-left: 190px;}
	.history-wrap.history-fixed .year p {padding-left: 190px;}
}

@media (max-width: 1200px){
	.page-header {background-position: calc(100% - 15px) 100%;}
	.section-header h3 {font-size: 40px;}
	
	/* s1_2 */
	.s1_2 .arti02 .inner .ci_box ul li .item {flex-wrap: wrap;}
	.s1_2 .arti02 .inner .ci_box ul li .item .pic-box {max-width: 100%;}
	.s1_2 .arti02 .inner .ci_box ul li .item dl {width: 100%; text-align: center;}
	.s1_2 .arti02 .inner .ci_box .item dl dd {margin-bottom: 0;}
	
	/* s1_3 */
	.history-wrap .year {padding-left: 70px; max-width: 450px;}
	.history-wrap .year h4 {left: 70px;}
	.history-wrap .year p {left: 70px;}
	
	.history-wrap.history-fixed .year h4 {padding-left: 85px;}
	.history-wrap.history-fixed .year p {padding-left: 85px;}
	
	.history-wrap .txt-wrap .txt-box {padding-left: 40px;}
	.history-wrap .txt-wrap .txt dl .month {font-size: 18px;}
	.history-wrap .txt-wrap .txt dl dd p {font-size: 18px;}
}

@media (max-width: 1024px){
	.page-header {background-size: 350px 350px;}
	.section-header h3 {font-size: 35px;}
	.s1_1 article .txt p {font-size: 18px;}
	
	/* s1_2 */
	.s1_2 .arti00 p {font-size: 20px;}
	
	.s1_2 .vision {gap: 30px;}
	.s1_2 .vision span {font-size: 24px;}
	.s1_2 .vision h4 {font-size: 28px; line-height: 1.5;}
	.s1_2 .purpose ul li dl dt {font-size: 26px;}
	.s1_2 .purpose ul li dl dd {font-size: 18px;}
	
	.s1_2 .arti02 .inner .ci p {font-size: 18px; margin-top: 30px;}
	.s1_2 .arti02 .inner .ci p ~ p {margin-top: 20px;}
	
	
	.s1_2 .arti02 .inner .ci_box ul li .item {gap: 20px;}
	.s1_2 .arti02 .inner .ci_box .item dl dt {font-size: 22px; line-height: 1.3;}
	.s1_2 .arti02 .inner .ci_box .item dl dd {font-size: 18px;}
	
	/* s1_3 */
	.s1_3 .bg h3 {font-size: 35px; line-height: 1.5;}
	.history-wrap .year {display:none;}
	.history-wrap .col {display:block;}
	.history-wrap .txt-wrap {width:100%;}
	.history-wrap .txt-wrap .txt-box {padding-left: 0;}
	.history-wrap .txt-wrap .txt-box .mo-year {display: block; font-size:40px; color: #0097da; font-weight: 800;}
	.history-wrap .txt-wrap .txt {margin-top: 20px;}
	.history-wrap .txt-wrap .txt ~ .txt {margin-top: 10px;}
	.history-wrap .txt-wrap .txt-box:before {display: none;}
	.history-wrap .txt-wrap .txt-box:after {top: 4px;}
	.history-wrap .txt-wrap .txt dl .month {font-size: 18px;}
	.history-wrap .txt-wrap .txt dl dd {font-size: 18px;}
	
	
}

@media (max-width: 768px){
	.page-header {background-position: 100% 100%; background-size: 250px 250px; height: 430px;}
	.page-header > .container {padding-top: 180px;}
	.page-header .container h2 {font-size: 40px; margin-top: 30px;}
	.page-header .container p {margin-top: 30px;}
	
	.lnb > .container {padding: 0;}
	.lnb ul li a {font-size: 16px; line-height: 55px;}
	
	.real-cont {padding: 80px 0 120px;}
	section {padding: 80px 0 120px}
	.section-header h3 {font-size: 28px;}
	.section-header p {font-size: 18px; margin-top: 30px;}
	.section-header p ~ p {margin-top: 15px;}
	.section-header p > br {display: none;}
	
	.s1_1 article {flex-wrap: wrap;}
	.s1_1 article .txt {max-width: 100%;}
	.s1_1 article .txt p {font-size: 16px;}
	.s1_1 article figure {margin: 0 auto;}
	.s1_1 article figure figcaption span {font-size: 18px;}
	.s1_1 article figure figcaption h4 {font-size: 24px;}
	
	/* s1_2 */
	.s1_2 .bg_s102 h4 {font-size: 30px;}
	.s1_2 .arti00 {margin-top: 40px;}
	.s1_2 .arti00 p {font-size: 18px;}
	.s1_2 .arti00 p ~ p {margin-top: 25px;}
	.s1_2 .arti00 p br {display: none;}
	
	.s1_2 .arti01 {margin-top: 40px;}
	
	.s1_2 .vision span {font-size: 20px; max-width: 120px;}
	.s1_2 .vision h4 {font-size: 22px;}
	
	.s1_2 .purpose ul {flex-wrap: wrap;}
	.s1_2 .purpose ul li {width: 100%; min-height: 350px;}
	.s1_2 .purpose ul li ~ li {margin-top: 40px;}
	.s1_2 .purpose ul li dl {padding: 30px 20px;}
	
	.s1_2 .arti02 {flex-wrap: wrap; gap: 30px; margin-top: 60px; padding-top: 40px;}
	.s1_2 .arti02 h4 {max-width: 100%; font-size: 24px;}
	.s1_2 .arti02 .inner .ci figure {height: 300px;}
	.s1_2 .arti02 .inner .ci figure img {height: 200px;}
	.s1_2 .arti02 .inner .ci_box {margin-top: 40px;}
	.s1_2 .arti02 .inner .ci_box ul li .item .pic {height: 250px;}
	.s1_2 .arti02 .inner .ci_box ul li .item .pic img {height: 150px;}
	.s1_2 .arti02 .inner .ci_box .item dl dd > br {display: none;}
	
	.s1_2 .arti02 .inner .ci_box ul li .item .pic-box > span {font-size: 22px;}
	
	/* s1_3 */
	.history-wrap {margin-top: 50px;}
	.history-wrap .txt-wrap .txt-box .mo-year {font-size: 30px;}
	.history-wrap .txt-wrap .txt dl .month {font-size: 16px;}
	.history-wrap .txt-wrap .txt dl dd p {font-size: 16px;}
	.history-wrap .txt-wrap .txt-box:last-child {padding-bottom: 100px;}
	
	/* s2_1 */
	.bg {height: 400px; margin-top: 60px; background-attachment: scroll; background-size: cover;}
}

@media (max-width: 480px){
	.page-header {height: 390px; background-position: calc(100% - 5px) 100%; background-size: 200px 200px;}
	.page-header .container small {font-size: 20px;}
	.page-header .container h2 {font-size: 35px; margin-top: 20px;}
	.page-header .container p {font-size: 18px;}
	.lnb ul li a {font-size: 14px; line-height: 50px; letter-spacing: 0;}
	
	.section-header p {font-size: 16px;}
	
	/* s1_2 */
	.s1_2 .bg_s102 h4 {font-size: 24px;}
	
	.s1_2 .vision span {font-size: 18px; max-width: 100px;}
	.s1_2 .vision h4 {font-size: 20px;}
	.s1_2 .purpose ul li dl dt {font-size: 22px;}
	.s1_2 .purpose ul li dl dd {font-size: 16px;}
	
	.s1_2 .arti02 .inner .ci p {font-size: 16px;}
	.s1_2 .arti02 .inner .ci p > br {display: none;}
	.s1_2 .arti02 .inner .ci p > br.mo {display: block;}
	.s1_2 .arti02 .inner .ci_box .item dl dt {font-size: 20px;}
	.s1_2 .arti02 .inner .ci_box .item dl dd {font-size: 16px;}
	.s1_2 .arti02 .inner .ci_box .item dl dd > br.mo {display: block;}
	
	.s1_2 .arti02 .inner .ci_box ul li .item .pic-box > span {font-size: 18px;}
	
	/* s1_3 */
	.s1_3 .bg {height: 300px;}
	.s1_3 .bg h3 {font-size: 28px;}
	
	/* s2 */
	.bg {height: 200px;}
}