@charset "UTF-8";

.banner-double {position:relative; overflow:hidden;}
.banner-double .con-info {float: left; width: 50%; position: relative; padding: 40px 4%; background: #E6F3F9; height: 400px;}
.banner-double .con-info::after {content: ""; position: absolute; width: 13px; height: 26px; border-top: 13px solid transparent; border-left: 13px solid #E6F3F9; border-bottom: 13px solid transparent; right: -13px; bottom: 50%; margin-bottom: -13px; z-index: 2;}


.banner-double .first .con-info::after {content: ""; position: absolute; width: 13px; height: 26px; border-top: 13px solid transparent; border-right: 13px solid #E6F3F9; border-bottom: 13px solid transparent; left: -13px; bottom: 50%; margin-bottom: -13px; z-index: 2; border-left: 0}

.banner-double .con-info a {position: relative; display: block; position:relative; padding-bottom: 62px;}
.banner-double .con-info a::before {content: ""; position: absolute; width: 45px; height: 45px; background: url("../images/ic_more1.png") no-repeat; right: 0; bottom: 0;}

.banner-double .con-info .tab-title {position:relative; display:inline-block; font-size: 18px; line-height: 30px; letter-spacing: -0.5px; color: #444; font-family: "Noto Bold";}
.banner-double .con-info .tab-title::after {content: ""; display: block; width: 30px; height: 1px; background: rgba(102, 102, 102, 0.5); margin: 30px 0;}

.banner-double-list > ul::after {content: ""; display: block; clear: both;}
.banner-double-list > ul > li {}
.banner-double-list > ul > li > .con > a {float: left; width: 50%;}

.banner-double .con-info .title {font-size: 18px; line-height: 30px; letter-spacing: -0.5px; color: #111111; 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-double .con-info .title span {background-image: linear-gradient(transparent 94%, #111 2px); background-repeat: no-repeat;
    background-size: 0 100%;
    transition: background-size 0.5s; transition: background 0.3s;}
.banner-double .con-info .info {font-size: 15px; line-height: 28px; height: 84px; letter-spacing: -0.5px; color: #666; 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-double .con-img {height: 400px;}
.banner-double .con-img.fw {background-size: 100% 100% !important;}
.banner-double .con-img.fh {background-size: auto 100% !important;}

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

.banner-double .con-info a:hover .title span {background-size: 100% 100%;}

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

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

}

@media all and (max-width:1055px) {
	.banner-double .con-img {height: 350px;}
	.banner-double .con-info .title {font-size: 20px;}
	.banner-double .con-info {padding: 29px 4%; height: 350px;}
	.banner-double .con-info .info {height: 56px;}
}

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

	.banner-double .con-info a::before {width: 35px; height: 35px; background-size: cover;}
}

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