@charset "UTF-8";

/*-------------------------------------------------
title       :메인 팝업 전용
Create date :2021-07-01
-------------------------------------------------*/

#issue {position:absolute; left:0; top:0; z-index:100; width:100%; height:0}
#issue.active {position:fixed; left:0; top:0; z-index:100; width:100%; height:0}

#issue .tt {position:absolute; top:3.4rem; left:50%; transform:translateX(-50%); z-index:-1; color:#fff; font-size:1.4rem;  width:150rem;   max-width: calc(100% - 2rem)}
#issue .tt a {position:absolute; right:0; z-index:50}
#issue .tt a em {font-size: 1.4rem; font-weight: 500;}
#issue .tt a span {padding-left: 1rem;}
/* #issue .control.open:before {content:''; font-family:'xeicon' !important;} */
#issue .control.open span {display:inline-block}
#issue .control.open strong {color:#ff0; display:inline-block; position:relative; margin:0 1rem}
#issue .control.open strong:after {content:''; background:#ea5303; border-radius:100rem; width:2rem; height:2rem; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:-1}
#issue .control.open:hover::after, #popup .control.open:focus::after {-webkit-animation:spread 1.25s infinite; animation:spread 1.25s infinite}

#issue .group {visibility:hidden; text-align:center; opacity:0; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%}
#issue.active .group::before {width:1000%; height:100%; margin-left:-500%; content:''; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); height:1000%; margin:0; background-color:rgba(0, 0, 0, 0.7); z-index:-1}

#issue .title {font-size:4.5rem; display:block; color:#fff}
#issue .list {max-width:128.4rem; margin:5rem auto; overflow:hidden}
#issue .list .img {padding:0 8rem; display:table-cell; width:33.3%; }
#issue .list .img a {display:block; width:100%; height:100%}
#issue .list .img img{width:100%}
#issue .slick-dots {margin:3rem 0 0}

#issue .label .count {font-weight:700; color:red}
#issue .label, #issue .control.close {display:inline-block; font-size:1.4rem; height:3.4rem; padding:0 2rem; border-radius:3rem; background-color:#000; color:#fff; line-height:2.4}
#issue .slick-slider {position: static;} 

/*컨트롤 버튼*/
#issue .list .slick-arrow  {background-color:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.5);  color:transparent; font-size:0; display:inline-block; width:5rem; height:5rem; line-height:1.6; position:absolute; top:50%; transform:translateY(-50%); z-index:10}
#issue .list .slick-arrow.slick-prev {left: 0;}
#issue .list .slick-arrow.slick-next {right: 0;}
#issue .list .slick-arrow:before {color:#fff; display:block; font-family:'xeicon'; font-size:2.4rem; width:100%; height:100%; line-height:2}
#issue .list .prev {left:0}
#issue .list .prev:before {content:''}
#issue .list .next{right:0}
#issue .list .next:before {content:''}

#issue .control.close::after {-webkit-transform:rotate(0); transform:rotate(0); -webkit-transition:all 0.2s; transition:all 0.2s}
#issue .control.close:hover::after, #issue .control.close:focus::after {-webkit-transform:rotate(180deg) translateY(2px); transform:rotate(180deg) translateY(2px)}
#issue .control.close::after {display:inline-block; position:relative; top:1px; font-family:"xeicon"; vertical-align:top; margin-left:0.5rem; content:''}

#issue.active {height:100%; z-index:100}
#issue.active .group {max-width:calc(100% - 2rem); visibility:visible; opacity:1; -webkit-transition:all 0.2s; transition:all 0.2s}
/*#issue.active .control.open {display:none}*/


@media screen and (max-width:1024px){

	#issue .tt {top:1.8rem}
	#issue .list {height:auto}
}
	
@media screen and (max-width:767px){
	
	#issue .control.open:before {font-size:2.2rem; padding-right:1.5rem}
	#issue .control.open em {display:none}
	#issue .control.open span.count {display:inline-block; position:absolute; right:0; top:0; z-index:1}
	#issue .control.open span.count > span {display:none}
	
	
}
@-webkit-keyframes spread 
{
	0% {width:120%; height:120%; opacity:0.1}
  	100% {width:150%; height:150%; opacity:0} 
}

@keyframes spread 
{
	0% {width:120%; height:120%; opacity:0.1}
  	100% {width:150%; height:150%; opacity:0} 
}



/* 메인  권익위 알림 존  */

#issue .new-modal .title-box__tit {color: #fff; font-size:2.6rem;}
#issue .new-modal .list {margin: 2.5rem auto;}
#issue .new-modal .item {letter-spacing: normal;}
#issue .item .label {background-color: #346da6 !important; border-radius: 0 !important; color: #fff;}
#issue .item .label i {font-size: 1.5rem; vertical-align: middle; margin-right: .8rem;}
#issue .item .label .count {color: #fff; font-weight: bold;}
#issue .new-madal .label,
#issue .new-modal .control.close {background-color: #212e42 !important; border-radius: 0;}
#issue .new-modal .oneday {
	display:inline-block;
	font-size:1.4rem;
	height:3.4rem;
	padding:0 2rem;
	line-height:2.4;
	margin: 0 0.5rem;
	background-color: #212e42 !important;
	border-radius: 0;
	color: #fff;
}

#issue .new-modal .oneday::after {display: none;}

#issue .new-modal .oneday input {vertical-align: middle;}

@media (max-width: 330px) {
	#issue .label, 
	#issue .control.close,
	#issue .new-modal .oneday {padding:0 .5rem;}	
}