@charset "UTF-8";
/*@import url(/font/dingbat_xeicon.css);*/

/*-------------------------------------------------
title       :메인 팝업 전용
Create date :2020-03-03
-------------------------------------------------*/
#issue .bx-wrapper .bx-viewport {box-shadow:none !important;}
#issue .bx-loading {display:none !important;}


#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 .control.open span {display:inline-block}
#issue .control.open strong {color:#ff0; display:inline-block; font-size:1.2rem; 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 {position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); visibility:hidden; margin-top:-1%; text-align:center; opacity:0}
#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.5)}

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

#issue .list {height:100%;}
#issue .list li {height: 100%;display:flex;align-items: center; padding:0 20px;}

#issue .label .count {font-weight:700; color:#1fc9e8;}
#issue .label, #issue .control.close {display:inline-block; height:40px; margin-top:0px; padding:0 20px; border-radius:20px; background-color:#000; color:#fff; line-height:39px;}

#issue .bx-wrapper .bx-viewport{/*margin:20px 0 40px 0;*/overflow: hidden !important;}
#issue .bx-wrapper .bx-pager {float:none; padding:20px 0;}
#issue .bx-wrapper .bx-pager.bx-default-pager a {background:none;border-radius:50%;border: 1px solid #1fc9e8;}
#issue .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {background-color: #1fc9e8 !important;}
#issue .bx-controls-direction a {position:absolute; top:inherit; bottom:0; left:auto; -webkit-transform:translateY(-50%); transform:translateY(-50%); overflow:hidden; left:0; width: 19px;height: 32px; color:#fff; text-align:center; line-height:1; opacity:0.5; -webkit-transition:all 0.2s; transition:all 0.2s}
#issue .bx-controls-direction a::before {display:block; width:100%; height:100%;  text-align:center; line-height:inherit; content: '';  background: url('../images/popup-prev.png') no-repeat center;}
#issue .bx-controls-direction a.bx-next {left:auto; right:0; margin:0}
#issue .bx-controls-direction a.bx-next::before {content: '';  background: url('../images/popup-next.png') no-repeat center;}
#issue .bx-controls-direction a:hover, #issue .bx-controls-direction a:focus {opacity:1}

#issue.active {height:100%; z-index:100000000;}
#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; -webkit-transition:all 0.2s; transition:all 0.2s}



@media screen and (max-width:768px){
	
	#issue .list li {padding: 0 10px;}

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

	#issue .bx-controls-direction a {top: inherit; bottom:0}
	#issue .bx-wrapper .bx-pager {padding-top:0;}

	#issue .label, #issue .control.close {padding: 0 15px; font-size: 13px; height: 34px; line-height: 32px;}


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