@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Bebas+Neue&display=swap');

body{background:#000; padding:0; margin:0; text-align:center; font-family: 'Noto Sans KR', sans-serif;}
ul, li{margin:0; padding:0;list-style:none;} 

body .content { background:#000; word-break:keep-all; }
.bkg-yellow { background:#ffc000; display:inline-block !important; margin:2rem auto; padding:7.5rem 1rem; }

h2 { font-size:2.2rem; letter-spacing:-0.125rem;   }

.txt {display:block; background:#fff; border:1px solid #00a651; text-align:left; min-height:20rem; padding:1rem; position:relative; }
.txt h3 { width:100%; background:#00a651; color:#fff; font-size:2rem; line-height:1.25; border-radius:0.5rem 0.5rem 0 0; padding:0.5rem 1rem; position:absolute; top:-1.5rem; left:-1.5rem;} 
.txt h5 {margin-top:2rem; font-family: 'Bebas Neue', sans-serif; font-size:2rem; letter-spacing:0.5px !important; line-height:1.5; border-bottom:1px solid #7d849d; }
.txt h5 span { font-family: 'Noto Sans KR', sans-serif; font-size:1rem; color:#666; float:right; font-weight:400; margin-top:1rem;}
.txt p { font-size:1.25rem; line-height:1.2;}

.width-3 .img {margin:0;  }
.width-3 .img img {margin-bottom:-0.75rem; }
.width-3 .txt h5 {margin-top:0;}
.width-3 h3 { width:100%; background:#00a651; color:#fff; font-size:2.25rem; line-height:1.25; border-radius:0.5rem 0.5rem 0 0; padding:0.75rem 0; text-align:center; margin:0; } 


.red .txt {border:1px solid #ed7d31;}
.red .txt h3 { background:#ed7d31; color:#ffff00;} 

.blue .txt {border:1px solid #0459a1;}
.blue .txt h3 { background:#0459a1; color:#ffff00;} 

.img img { width:100%; max-width:100%; margin:0;}


/* Modal */
.modal {
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.modal-content {
  background-color: #fff;
  width: 554px;
  padding: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 0px;
  max-width:100%;
}
.modal-content h2 {
  background-color: #000;
  color: #fff;
  padding: 5px;
}
.modal-content img {
  max-width:100%;}
.close-modal {
  position:absolute;
  top:0;
  right:0;
  border: 0px solid #000;
  padding: 2px 7px;
  border-radius: 5px;
  float: right;
}




@media only screen and (max-width: 1140px) {
	.txt {min-height:25rem; }
	.txt h5 span {display:none; }
	.txt h3 {font-size:1.75rem;}
	.txt h5 {margin-top:3rem; }
	.width-3 h3 { font-size:1.8rem; }
}

@media only screen and (max-width: 960px) {
	.txt {min-height:28rem; }
}

@media only screen and (max-width: 768px) {
	.txt {min-height:0; }
	.txt h5 span {display:inline; }

	.funcoop {margin-bottom:3.5rem; }
}