@charset "UTF-8";


.banner-notice > ul > li {overflow: hidden;}
.banner-notice .slick-list, .banner-notice .slick-slider, .banner-notice .slick-track {position: static;}
.banner-notice {position:relative; overflow:hidden;}
.banner-notice.banner-notice-style3 .txt-list {float: left; width: 50%; position: relative; padding: 40px 4%; background: #d16200; height: 400px;}
.banner-notice.banner-notice-style3 .txt-list::after {content: ""; position: absolute; width: 13px; height: 26px; border-left: 13px solid #d16200; border-top: 13px solid transparent; border-bottom: 13px solid transparent; top: 50%; margin-top: -13px; right: -13px;  z-index: 2;}
.banner-notice .txt-list > .title {position:relative; display:inline-block; font-size: 18px; line-height: 30px; letter-spacing: -0.5px; color: #fff; font-family: "Noto Bold";}
.banner-notice .txt-list > .title::after {content: ""; display: block; width: 30px; height: 1px; background: rgba(255, 255, 255, 0.5); margin: 30px 0;}

.banner-notice .con {display: inline-block; width: 100%;}
.banner-notice .txt-list .con a {position: relative; display: block; position:relative; padding-bottom: 62px;}
.banner-notice .txt-list .con a::after {content: ""; position: absolute; width: 45px; height: 45px; background: url("../images/ic_more2.png") no-repeat; right: 1px; bottom: 0;}

.banner-notice .txt-list > ul .title span {background-image: linear-gradient(transparent 94%, #fff 2px); background-repeat: no-repeat;
background-size: 0 100%;
transition: background-size 0.5s; transition: background 0.3s;}

.banner-notice .txt-list > ul .title:hover span {background-size: 100% 100%;}

.banner-notice .txt-list > ul .title {font-size: 18px; line-height: 30px; letter-spacing: -0.5px; color: #fff; height: 60px; overflow: hidden; text-overflow: ellipsis; margin-bottom: 15px; font-weight: 600; display:-webkit-box;
    word-wrap:break-word;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical; }
.banner-notice .txt-list > ul .info {font-size: 15px; line-height: 28px; height: 84px; letter-spacing: -0.5px; color: #fff; overflow: hidden; text-overflow: ellipsis; display:-webkit-box;
    word-wrap:break-word;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;  word-break: break-all;}

.banner-notice .txt-list .slick-dots {position: absolute; right: calc(8% + 20px); top: 41px; z-index: 5;}
.banner-notice .txt-list .slick-dots li {display: inline-block; vertical-align: middle; margin: 0 5px;}
.banner-notice .txt-list .slick-dots li button {text-indent: -9999px; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); vertical-align: middle;}
.banner-notice .txt-list .slick-dots li.slick-active button {background-color: #fff;}

.banner-notice .img-list {float: left; width: 50%;height: 400px;}
.banner-notice .img-list .con-img {height: 400px;}
.banner-notice .img-list .con-img.fw {background-size: 100% 100% !important;}
.banner-notice .img-list .con-img.fh {background-size: auto 100% !important;}

.banner-notice-btn3 {position: absolute; width: 11px; height: 13px; right: 8%; top: 51px; overflow: hidden;}
.banner-notice-btn3 button {display: none; width: 11px; height: 13px; text-indent: -9999px;}
.banner-notice-btn3 button.on {display: block; vertical-align: middle;}
.banner-notice-btn3 button.pause {background: url("../images/btn_banner_stop.png") no-repeat center;}
.banner-notice-btn3 button.play {background: url("../images/btn_banner_play.png") no-repeat center;}

.banner-notice .list .nodata {text-align: center; padding: 20px 0;}

.banner-notice .img-list .con a {position: relative; display: block; overflow: hidden;}
.banner-notice .img-list .con a:focus::after {content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; border: 2px solid #000;}
.con-img {transform: scale(1); transition: transform 0.5s;}
.img-list .con a:hover .con-img {transform: scale(1.05);}

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

}

@media all and (max-width:1055px) {
	.banner-notice .con-img {height: 350px;}
  .banner-notice .img-list .con-img {height: 350px;}
	.banner-notice.banner-notice-style3 .txt-list {padding: 29px 4%; height: 350px;}
	.banner-notice .txt-list > ul .info {height: 56px;}

  .banner-notice .txt-list .slick-dots {top: 30px;}
  .banner-notice-btn3 {top: 41px;}
}

@media all and (max-width:768px) {
	.banner-notice .con a {padding-bottom: 47px}
	.banner-notice .img-list {height: 210px;}
	.banner-notice .img-list .con-img {height: 210px;}
	.banner-notice.banner-notice-style3 .txt-list {padding: 20px 4%; height: 210px;}
	.banner-notice .txt-list > .title {margin-bottom: 15px; font-size: 16px;}
	.banner-notice .txt-list > .title::after {display: none;}
	.banner-notice .txt-list > ul .title {margin-bottom: 0; font-size: 15px; line-height: 26px; height: 78px; -webkit-line-clamp:3;}
	.banner-notice .txt-list > ul .info {display: none;}

  .banner-notice .txt-list .slick-dots {top: auto; bottom: 20px; left: 8%; right: auto;}
  .banner-notice-btn3 {bottom: 23px; top: auto; left: 88px; right: auto;}
  .banner-notice .txt-list .con a::after {width: 35px; height: 35px; background-size: cover; bottom: 10px;}
}

@media all and (max-width:500px) {
	.banner-notice-btn3 {left: 75px; right: auto;}
}

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