@charset "utf-8";

/* 새글 스킨 (latest) */
.notice {position: relative;
padding: 30px 40px;
background: transparent;height: auto;}





.Header_Con_2{width:100%;padding:30px;position:relative;top:0;left:0}
.Header_Con_2>h1{font-weight:700;text-align:center;color:#fff;font-size:4em}
.Header_Con_2::after{
clear: both;
  content: 'NOTICE';
  display: block;
  width: 100%;
  position: absolute;
  right: 0%;
  top: -5%;
  opacity: 0.25;
  color: #fff;
  text-align: center;
  font-size: 5em;
  font-weight: 800;
}






.notice>h2>a {font-size:1em;color:#000;font-weight:400}
.notice li {text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
.notice li a, .notice li.empty_li {color:#e3e3e3;padding:40px 0;display:inline-block}
.notice li a{display:block;width:100%}
.notice li .lock_icon {display:inline-block;line-height:14px;width:16px;font-size:0.833em;color:#4f818c;background:#cbe3e8;text-align:center;border-radius:2px;font-size: 12px;border:1px solid #a2c6ce;vertical-align:baseline}
.notice li .new_icon {display:inline-block;line-height:16px;width:16px;font-size:0.833em;color:#ffff00;background:#6db142;text-align:center;margin-right:3px;border-radius:2px;vertical-align:baseline}
.notice .cnt_cm {background:#5c85c1;color:#fff;font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;white-space:nowrap;margin-left:5px}
.notice li.empty_li {border-bottom:0;line-height:120px}
.notice li dl{width:100%;display: flex;
 align-items: center;
  flex-wrap: wrap;
justify-content: flex-start;
  gap: 100px;}

.notice li dl dt{width: 150px;
height: 150px;
text-align: center;
color: #fff;
background: rgba(255,255,255,0.25);
box-sizing: border-box;
border-radius:50%;
padding:30px 0;}
.notice li dl dt h4{font-weight: 400;
line-height: 0;
padding:0 0 10px;;
font-size: 18px;}
.notice li dl dt h2{font-weight: 600;
letter-spacing: 0px;
font-size: 3em;padding:5px}


.notice li dl dd{width: calc(100% - 250px);
  padding: 0 0px;}

.notice li dl dd h3{font-weight:600;padding:0 10px;color:#fff;font-size:2.5em;}
.notice li dl dd h4{font-weight:400;color:#fff;line-height:1.66;padding:5px 10px;font-size:1.2em}









@media all and (min-width:1px) and (max-width:800px) {



.Header_Con_2{width:100%;padding:30px;position:relative;top:0;left:0}
.Header_Con_2>h1{font-weight:700;text-align:center;color:#fff;font-size:2.5em}
.Header_Con_2::after{
clear: both;
  content: 'NOTICE';
  display: block;
  width: 100%;
  position: absolute;
  right: 0%;
  top: -5%;
  opacity: 0.25;
  color: #fff;
  text-align: center;
  font-size: 3.5em;
  font-weight: 800;
}




.notice{width:100%;padding:10px;}
.notice li dl{width:100%;display: flex;
 align-items: center;
  flex-wrap: wrap;
justify-content: flex-start;
  gap: 20px;}

.notice li dl dt{width: 90px;
height: 90px;
text-align: center;
color: #fff;
background: rgba(255,255,255,0.25);
box-sizing: border-box;
border-radius:50%;
padding:15px 0;}
.notice li dl dt h4{font-weight: 400;
line-height: 0;
padding:0 0 10px;;
font-size: 15px;}
.notice li dl dt h2{font-weight: 600;
letter-spacing: 0px;
font-size: 2em;padding:5px}


.notice li dl dd{width: calc(100% - 110px);
  padding: 0 0px;}

.notice li dl dd h3{font-weight:600;padding:0 10px;color:#fff;font-size:1.8em;}
.notice li dl dd h4{font-weight:400;color:#fff;line-height:1.66;padding:5px 10px;font-size:0.8em}
.notice li {
  text-overflow: ellipsis;
  overflow: visible;
  white-space: nowrap;
}


.notice li a, .notice li.empty_li {
  color: #e3e3e3;
  padding: 15px 10px;
  display: inline-block;
}


}