@charset "utf-8";
/* CSS Document */

/* 공통 */
.mainContent {}
.mainContent h1{ font-size:37px; margin-bottom:20px;} 
.mainContent .newsTit{ font-weight:700;display: block;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;white-space: normal;-webkit-line-clamp:1; }
.mainContent .newsTit b{ color:#d8282f; margin-right:10px;}
.mainContent .dateTxt{ opacity:0.7; margin-top:10px; font-size:19px;}

#sec01 img{ width:100%;}
#sec02 { margin:100px 0;}
#sec02 .inner{ display:flex;display: grid; grid-template-columns:57% 1fr;gap:100px;}
#sec02 .inner .s01 .area01{display: grid; grid-template-columns:repeat(2, 1fr);gap:37px;}
#sec02 .inner .s01 .area01 .newsTit, #sec02 .inner .s02 .newsTit, #sec03 .inner .newsTit{margin:15px 0 10px 0;}
#sec02 .inner .s01 .area02 dl{display: grid; grid-template-columns:250px 1fr;gap:37px; border-top:1px solid rgb(0,0,0,0.2); padding-top:30px; margin-top:30px;}
#sec02 .inner .s01 .area02 .newsTit{ margin-bottom:10px;}
#sec02 .inner .s02 ul{ height:calc(100% - 64px);background: linear-gradient(15deg, rgba(0, 158, 206, 1) 38%, rgba(0, 114, 188, 1) 100%);  padding:70px 70px 70px 120px; box-sizing:border-box;}
#sec02 .inner .s02 ul li{ position:relative;}
#sec02 .inner .s02 ul li:before{ position:absolute; top:0; left:-120px; padding:20px; box-sizing:border-box; background:#005da4; color:#fff; font-size:35px; text-align:center; border-radius:0 30px 30px 0; font-weight:700;}
#sec02 .inner .s02 ul li:nth-child(1):before{ content:'01';}
#sec02 .inner .s02 ul li:nth-child(2):before{ content:'02';}
#sec02 .inner .s02 ul li+li{ margin-top:70px;}
#sec02 .inner .s02 ul a{color:#fff;}
#sec02 .inner img{ width:100%;}

#sec03 .inner{display: grid; grid-template-columns:26% 1fr;}
#sec03 .inner > div{ padding:90px; box-sizing:border-box;}
#sec03 .inner > div:before{ content:''; position:absolute; top:0; height:100%; width:1000px;} 
#sec03 .inner .s01{ background:#edebe8; padding-left:0;}
#sec03 .inner .s01:before{ background:#edebe8; left:-1000px;}
#sec03 .inner .s02{ background:#f6f5f3; padding-right:0;}
#sec03 .inner .s02:before{ background:#f6f5f3; right:-1000px;}
#sec03 .inner .s02 ul{display: grid; grid-template-columns:repeat(3, 1fr);gap:37px;}
#sec03 .inner img{ width:100%;}


.reporter{ margin-left:10px;}


@media (max-width: 1980px) {
	
	.mainContent h1{ font-size:30px;} 
	.mainContent .newsTit{ font-size:23px;}
	.mainContent .dateTxt{font-size:16px;}
	
	#sec02 .inner .s01 .area01 .newsTit, #sec02 .inner .s02 .newsTit, #sec03 .inner .newsTit{margin:15px 0 5px 0;}
	
	#sec02 .inner{ gap:70px;}
	#sec03 .inner > div{ padding:70px;}
	#sec02 .inner .s01 .area02 dl{padding-top:25px; margin-top:25px;grid-template-columns:200px 1fr;}
	#sec02 .inner .s02 ul{padding:50px 50px 50px 100px;}
	#sec02 .inner .s02 ul li:before{ font-size:23px;left:-100px;}

}

@media (max-width: 1440px) {
	#sec02{ margin:70px 10px;}
	
	#sec03 .inner .s01{ padding-left:10px;}
	#sec03 .inner .s02{ padding-right:10px;}
}
@media (max-width: 1280px) {
	#sec02 .inner{ display:block;}
	#sec02 .inner .s02{ margin-top:50px;}
	
	#sec03 .inner > div{ padding:70px 50px;}
}
@media (max-width: 800px) {
	#sec03 .inner{grid-template-columns: repeat(1, 1fr);}
	#sec03 .inner > div{ padding:70px 10px;}
}

@media (max-width: 640px) {
	
	.mainContent h1{ font-size:25px;}
	.mainContent .newsTit{ font-size:20px;}
	
	#sec02 .inner .s01 .area01{gap:10px;}
	#sec02 .inner .s01 .area02 dl{grid-template-columns:150px 1fr;gap:20px;}
	#sec03 .inner .s02 ul{    grid-template-columns: repeat(2, 1fr);gap:10px;}
	#sec03 .inner .s02 ul li:nth-child(3){ display:none;}
}

@media (max-width: 480px) {
	
	
	
	#sec02 .inner .s01 .area01{gap:20px;}
	#sec02 .inner .s01 .area01{    grid-template-columns: repeat(1, 1fr);}
	
	#sec02 .inner .s01 .area02 dl{grid-template-columns: repeat(1, 1fr);border-top:none; margin:0; padding:0; }
	#sec02 .inner .s01 .area02 a{ display:block;}
      #sec02 .inner .s01 .area02 a{ padding-top:20px;}
	
	#sec02 .inner .s02 ul{ padding:20px 20px 20px 50px;}
	#sec02 .inner .s02 ul li:before{ left:-50px;padding:10px 20px;}
	
	#sec03 .inner .s02 ul{    grid-template-columns: repeat(1, 1fr);gap:20px;}
	
}