@charset "utf-8";

#container_main{position:relative;}
#container_main h4{position:relative; font-size:40px; font-weight:900; text-align:center;}
#container_main h4:before{content:''; position:absolute; top:50%; left:0; z-index:0; width:100%; height:1px;}
#container_main h4 span{position:relative;z-index:1;display:inline-block;padding:0 25px;background:#fff;}

/* 공통 */
.sec.inner, .sec .inner{position:relative; padding-top:70px; padding-bottom:70px;}

.control{position:absolute; top:70px; right:0; display:flex; align-items:center; padding:6px 0 6px 30px; background:#fff;}

a.more{position:relative; display:inline-block; width:34px; height:34px;border-radius:50%; box-sizing:border-box; border:1px solid #333; font-size:0; text-indent:-9999px;}
a.more:before,a.more:after{content:''; position:absolute; top:50%; left:50%; width:18px; height:2px; margin:-1px 0 0 -9px; background:#333;}
a.more:after{width:2px; height:18px; margin:-9px 0 0 -1px;}

.list_wrap{display:flex; margin:45px 0 0 0;}
.list_wrap>li{flex:0 0 auto; width:calc((100% - (2.85% * 2)) / 3); height:270px; border:1px solid #587579; background:#222; border-radius:20px; overflow:hidden;}
.list_wrap>li + li{margin-left:auto;}
.list_wrap a{position:relative; display:block; width:100%; height:100%;}
.list_wrap a:after{content:''; position:absolute; z-index:2; top:calc((100% - 86px) / 2); left:50%; width:46px; height:46px; background:url(/images/data/main/btn_play.png) no-repeat; background-size:contain; transform:translate(-50%, -50%);}
.list_wrap a .pic{position:relative; z-index:1; width:100%; height:100%;}
.list_wrap a .pic img{position:absolute; top:50%; left:50%; height:100%; transform:translate(-50%,-50%);}
.list_wrap a .txt{position:absolute; z-index:2; bottom:0; width:100%; padding:20px 20px 16px 20px; box-sizing:border-box; background:rgba(55,66,87,0.85); color:#fff; font-size:18px;}
.list_wrap a .txt .tit{width:100%; padding:0 0 8px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

@media all and (max-width:1430px){
	.control{right:15px;}
}

@media all and (max-width:1200px){
	.list_wrap>li:last-child{display:none;}
	.list_wrap>li{ width:calc((100% - (2.85% * 1)) / 2);}
}

@media all and (max-width:1024px){
	#container_main h4{font-size:36px;}
}

@media all and (max-width:768px){
	#container_main h4{font-size:32px;}
	.sec.inner, .sec .inner{padding-top:50px; padding-bottom:50px;}
	.control{top:50px; right:10px; padding:1.5px 0 1.5px 25px;}

	.list_wrap{margin:35px 0 0 0;}
	.list_wrap>li{height:240px;}
	.list_wrap a .txt{font-size:16px;}
}
@media all and (max-width:568px){
	#container_main h4{font-size:28px;}
	.sec.inner, .sec .inner{padding-top:40px; padding-bottom:40px;}
	.control{top:40px; padding:1px 0 1px 15px;}

	a.more{width:30px; height:30px;}
	a.more:before,a.more:after{width:14px; margin:-1px 0 0 -7px;}
	a.more:after{width:2px; height:14px; margin:-7px 0 0 -1px;}
	
	.list_wrap{justify-content:center; margin:20px 0 0 0;}
	.list_wrap>li:not(:first-child){display:none;}
	.list_wrap>li{width:80%; height:260px;}
	.list_wrap a:after{top:calc((100% - 66px) / 2);}
	.list_wrap a .txt{padding:15px 15px 12px 15px; font-size:15px;}
	.list_wrap a .txt .tit{padding:0 0 5px;}
}
@media all and (max-width:480px){
	.list_wrap>li{width:90%; height:240px;}
}
@media all and (max-width:380px){
	#container_main h4{font-size:24px;}
	.sec.inner, .sec .inner{padding-top:30px; padding-bottom:30px;}
	.control{top:30px; padding:3px 0 3px 10px;}

	a.more{width:24px; height:24px;}
	a.more:before,a.more:after{width:10px; margin:-1px 0 0 -5px;}
	a.more:after{width:2px; height:10px; margin:-5px 0 0 -1px;}

	.list_wrap>li{width:100%; height:220px;}
}

#news h4 span{color:#2352b1;}
#news h4:before{background:#2352b1;}

#media{background:#f4f4f4;}
#media h4 span{color:#23b1af; background:#f4f4f4;}
#media h4:before{background:#23b1af;}
#media .control{background:#f4f4f4;}

#publish:nth-of-type(4) {background: #f4f4f4;}
#publish h4 span{color:#b14e23;}
#publish h4:before{background:#b14e23;}
#publish .list_wrap>li{width:calc((100% - (2.85% * 3)) / 4); height:370px; background:transparent;}
#publish .list_wrap a:after{display:none;}
#publish .list_wrap a .pic img{width:100%;}
#publish .list_wrap a .txt .tit{padding:0;}

#publish:nth-of-type(3) h4 span {color: #299f58;}
#publish:nth-of-type(3) h4:before {background:#299f58;}
#publish:nth-of-type(4) h4 span {background: #f4f4f4;}
#publish:nth-of-type(4) .control {background: #f4f4f4;}
#publish:nth-of-type(5) h4 span {color: #7a23b1;}
#publish:nth-of-type(5) h4:before {background: #7a23b1;}

@media all and (max-width:1200px){
	#publish .list_wrap>li:last-child{display:block;}
	#publish .list_wrap>li{height:320px;}
}
@media all and (max-width:1024px){
	#publish .list_wrap>li{height:280px;}
}
@media all and (max-width:768px){
	#publish .list_wrap>li:nth-child(4){display:none;}
	#publish .list_wrap>li{width:calc((100% - (2.85% * 2)) / 3);}
}
@media all and (max-width:568px){
	#publish .list_wrap>li:not(:first-child){display:block;}
	#publish .list_wrap>li:nth-child(n+3){display:none;}
	#publish .list_wrap>li{width:40%;}
	.list_wrap>li + li{margin-left:15px;}@media all and (max-width:568px){
}
@media all and (max-width:480px){
	#publish .list_wrap>li{width:calc((100% - 30px) / 2); height:250px;}
}
@media all and (max-width:380px){
	#publish .list_wrap>li:not(:first-child){display:none;}
	#publish .list_wrap>li{width:60%;}
}