@charset "UTF-8";

/*-------------------------------------------------
title       :메인 팝업 전용
Create date :2023-05-08
-------------------------------------------------*/
@import url("/font/dingbat_xeicon.css");

#issue .tt {margin-top:-0.3rem; margin-right:3.5rem}
#issue .control.open {display:block; width:3.5rem; height:3.5rem; line-height:3.5rem; position:relative; text-align:center}
#issue .control.open:before {content:''; color:#333; display:block; font-size:2.8rem; font-family:'xeicon'}
#issue .control.open em {display:none}
#issue .control.open span {position:absolute; right:-0.8rem; bottom:-1rem; z-index:1}
#issue .control.open strong {color:#fff; display:inline-block; font-size:1.2rem; position:relative; margin:0 1rem}
#issue .control.open strong:after {content:''; background:#00cd83; border-radius:100rem; width:2rem; height:2rem; position:absolute; left:50%; top:calc(50% - 2px); transform:translate(-50%, -50%); z-index:-1}
#issue .control.open .count span {display:none}
#issue .control.open:hover::after, #popup .control.open:focus::after {-webkit-animation:spread 1.25s infinite; animation:spread 1.25s infinite}


#issue .title {font-size:4.5rem; display:block; color:#fff}

#issue .list li {display:inline}
#issue .list li a {display:block; width:100%; height:100%; position:relative}
#issue .list li a:focus:before {content:''; width:100%; height:100%; border:3px solid #000; position:absolute; left:0; top:0}

#issue .item {margin-top:3rem; text-align:center}
#issue .label .count {font-weight:700; color:#dc6312}
#issue .label, #issue .control.close {display:inline-block; font-size:1.6rem; height:4rem; padding:0.6rem 2rem 0; border-radius:3rem; background-color:#000; color:#fff; line-height:3rem; margin-bottom:0.5rem}

#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 {transform:rotate(180deg)}
#issue .control.close::after {display:inline-block; position:relative; top:-2px; font-family:"xeicon"; vertical-align:top; margin-left:0.5rem; content:''}

#issue .bx-wrapper .bx-viewport {-webkit-box-shadow:inherit; margin:2rem 0}
#issue .bx-wrapper .bx-controls {position:relative}
#issue .bx-wrapper .bx-pager {float:none; padding:1rem 0}  
#issue .bx-wrapper .bx-pager a.active {background-color:#0c7cf2}
#issue .bx-controls-direction a {background:inherit; position:absolute; top:inherit; bottom:0; left:0; transform:translateY(-50%); font-size:0; overflow:hidden; width:3rem; height:3rem; color:#fff; text-align:center; line-height:3rem; text-indent:inherit; transition:all 0.2s}
#issue .bx-controls-direction a::before {display:block; font-size:3rem; width:100%; height:100%; font-family:"xeicon"; text-align:center; line-height:inherit; content:''}
#issue .bx-controls-direction a.prev:before {content:''}
#issue .bx-controls-direction a.bx-next {left:auto; right:0; margin:0}
#issue .bx-controls-direction a.bx-next::before {content:''}
#issue .bx-controls-direction a:hover, #issue .bx-controls-direction a:focus {opacity:1}

#issue .group {display:none; visibility:hidden; opacity:0; padding:0 2rem; position:fixed; left:0; top:0; width:100%; height:100%; transition:all 0.2s; z-index:1}
#issue.active .group::before {position:absolute; left:50%; top:0; z-index:-1; 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)}
#issue.active .group {display:flex; flex-direction:column; align-items:center; justify-content:center; visibility:visible; opacity:1}


@media screen and (max-width:1024px){
	#issue .control.open:before {color:#fff}
}

@media screen and (max-width:768px){
	#issue .control.open:before {color:#fff}
}

@-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} 
}