@charset "UTF-8";

.depart-notice {position:relative; overflow:hidden; height: 350px !important;}
.depart-notice > ul {float: left;}
.depart-notice > ul > li { float: left; }
.depart-notice > ul > li > .title button {position:relative; display:inline-block; font-size: 22px; line-height: 35px; color: rgba(255, 255, 255, 0.5); letter-spacing: -0.5px; font-family: "Noto Medium"; margin-bottom: 20px; margin-right: 25px;}
.depart-notice > ul > li.on > .title button {color: #fff;}
.depart-notice .more {position:absolute; right:0; top:10px; text-indent:-99999px;  width:23px; height:23px; background:url('../images/btn_more.png') no-repeat center center;display:none;}

.notice-title {float: left; font-size: 32px; line-height: 40px; color: #fff; font-family: "Mont Medium";}
.notice-title::after {content: ""; display: inline-block; width: 50px; height: 1px; background: #fff; margin: 0 10px 0; vertical-align: middle;}

.depart-notice .slider {}

.depart-notice .con {border: 10px solid rgba(255, 255, 255, 0.4); transition: all 0.3s;}
.depart-notice .con a {display: block; position:relative; background: rgba(0, 0, 0, 0.4); padding: 20px 6%; padding-top: 65px; transition: background 0.3s;}
.depart-notice .con a::before {content: ""; position: absolute; width: 38px; height: 28px; background: url("../images/ic_notice.png") no-repeat; left: 6%; top: 20px; transition: background 0.3s;}
.depart-notice .con a::after {content: ""; position: absolute; width: 27px; height: 27px; background: url("../images/btn_more.png") no-repeat; right: 6%; bottom: 20px; transition: background 0.3s;}
.depart-notice .con a .title {font-size: 20px; line-height: 30px; letter-spacing: -0.5px; color: #fff; height: 60px; overflow: hidden; font-family: "Noto DemiLight"; word-break: break-all; transition: color 0.3s;}
.depart-notice .con a .info {font-size: 16px; line-height: 25px; letter-spacing: -0.5px; color: #b8b8b8; height: 50px; overflow: hidden; word-break: break-all; transition: color 0.3s;}

.depart-notice .con a:hover:before {width:100%;}
.depart-notice .date {display: block; font-size: 16px; line-height: 25px; color: #b8b8b8; font-family: "Mont Regular"; margin-top: 30px; padding-right: 30px;}

.depart-notice .list {display: none; position: absolute; left: 0; bottom: 0; height: 310px; width: 100%;}
.depart-notice .list > ul {margin: 0 -10px;}
.depart-notice .list .nodata {text-align: center; padding: 20px 0; color: #fff; font-family: "Noto Medium"; font-size: 21px;}
.depart-notice .list li {float: left; width: 25%; padding: 20px 10px; height: 100%;}


.depart-notice > ul > li.on .list,
.depart-notice > ul > li.on .more{display: block;}

@media all and (min-width: 768px){
  .depart-notice .con:hover {box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3); border-color: #D5D5D5;}
  .depart-notice .con:hover a {background: #fff;}
  .depart-notice .con:hover a::before {background: url("../images/ic_notice_on.png") no-repeat;}
  .depart-notice .con:hover a::after {background: url("../images/btn_more_on.png") no-repeat;}
  .depart-notice .con:hover a .title {color: #111111;}
  .depart-notice .con:hover a .info {color: #666666;}
}

@media all and (min-width:1921px) {

}

@media all and (max-width:1023px) {

}

@media all and (max-width:768px) {
  .notice-title {float: none;}
  .depart-notice {height: 390px !important;}
  .depart-notice > ul {float: none;}
  .depart-notice > ul > li > .title button {margin-bottom: 0; margin-top: 10px; font-size: 18px;}
}

/*20230509 백그라운드 이미지 alt 값 대신 css로 처리*/
.text-hidden{position: absolute !important; left: -99999px !important; text-indent: -9999px !important;}