@charset "UTF-8";

/*-------------------------------------------------
title       : 메인 팝업O 전용
Author      : 플랜아이 광주
Create date : 2020-03-03
-------------------------------------------------*/

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

#issue .control.open { position: absolute; top: 50%; left: auto; transform: translateY(-50%); position: fixed; left: 1rem; z-index: 1; width: 8rem; height: 8rem; padding-top: 1.5rem; border-radius: 100%; background-color: #009fdc; color: #fff; text-align: center; }
#issue .control.open::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; width: 120%; height: 120%; border-radius: 100%; background-color: #009fdc; content: ''; opacity: 0.1; }
#issue .control.open span { display: block; }
#issue .control.open strong { color: #ff0; }
#issue .control.open:hover::before, #popup .control.open:focus::before { animation: spread 1.25s infinite; }

#issue .group { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; margin-top: -1%; text-align: center; opacity: 0; }
#issue .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%; transform: translate(-50%, -50%); height: 10000%; margin: 0; background-color: rgba(0, 0, 0, 0.5); }

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

#issue .list li { display: inline; padding: 0 2rem; }

#issue .label .count { font-weight: 700; color: red; }
#issue .label, #issue .control.close { display: inline-block; height: 3rem; margin-top: 3rem; padding: 0 2rem; border-radius: 3rem; background-color: #000; color: #fff; line-height: 3.2rem; }

#issue .control.close::after { transform: rotate(0); transition: all 0.2s; }
#issue .control.close:hover::after, #issue .control.close:focus::after { 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 .bx-controls-direction a { position: absolute; top: 50%; left: auto; transform: translateY(-50%); font-size: 3rem; overflow: hidden; left: 0; width: 3rem; height: 3rem; color: #fff; text-align: center; line-height: 3rem; opacity: 0.5; transition: all 0.2s; }
#issue .bx-controls-direction a::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; content: ''; }
#issue .bx-controls-direction a.bx-next { left: auto; right: 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.active { height: 100%; }
#issue.active .group { width: 150rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; visibility: visible; margin-top: 0; opacity: 1; transition: all 0.2s; }

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