@charset "UTF-8";

/*-------------------------------------------------
title       :메인 팝업 전용
Create date :2020-03-03
-------------------------------------------------*/

/*default*/
.bx-wrapper .bx-loading {display:none}
.bx-wrapper .bx-viewport {-webkit-box-shadow:0 0 0 transparent; box-shadow:0 0 0 transparent}

/*컨트롤*/
.bx-wrapper .bx-pager {float:right}
.bx-wrapper .bx-pager a {display:inline-block; overflow:hidden; width:1rem; height:1rem; margin-left:1rem; border-radius:100%; background-color:#efefef; -webkit-transition:all 0.2s; transition:all 0.2s; text-indent:1rem}
.bx-wrapper .bx-pager.bx-default-pager a {background:none; border:1px solid #00a4dd}
.bx-wrapper .bx-pager.bx-default-pager a:hover, 
.bx-wrapper .bx-pager.bx-default-pager a.active{background-color:#00a4dd}
.bx-controls a {display:inline-block; overflow:hidden; position:relative; top:0.25rem; width:3rem; height:3rem; margin-right:2rem; background:0 none; text-indent:1rem; line-height:1}
.bx-controls a:before {display:block; width:100%; height:100%; font-family:"xeicon"; text-align:center; line-height:inherit; text-indent:0}
@media screen and (min-width:1000px) {
	/*효과*/
	.bx-controls a:hover:before {color:#09b8b2}
}

/*이전/다음버튼*/
.bx-controls-direction {float:left}
.bx-controls-direction a.active {display:none}
.bx-controls-direction a.bx-prev::before { content: ''; }
.bx-controls-direction a.bx-next::before { content: ''; }

/*재생/정지*/
.bx-controls-auto a {font-size:2rem; top:0.2rem}
.bx-controls-auto a.bx-stop::before { content: ''; }
.bx-controls-auto a.bx-start::before { content: ''; }
.bx-controls-auto .active {display:none !important}


.head-on #issue {z-index:-1}

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

#issue .tt a {position:fixed; top:1.3rem; right:19rem; z-index:10; background-color:#ea5303; width:2.25rem; height:2.25rem; border-radius:100%; padding:0.5rem 0.4rem; text-align:center}
#issue .tt a em {color:transparent; font-size:0; text-indent:-10000px}
#issue .control.open:before {content:''; color:#fff; font-size:1.3rem; font-family:'xeicon' !important;}
#issue .control.open span {display:inline-block}
#issue .control.open strong {color:#525252; font-family:'Roboto'; font-size:0.7rem; display:inline-block; position:relative; margin:0 0.5rem}
#issue .control.open strong:after {content:''; background:#fff700; border-radius:100rem; width:1rem; height:1rem; 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 .control .count {position:absolute; left:1.3rem; top:0.8rem; z-index:1}
#issue .control .count span {color:transparent; font-size:0; text-indent:-10000px}

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

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

#issue .list li {display:inline}
#issue .list li a {display:block; width:100%; height:100%}

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

#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 .bx-wrapper .bx-viewport{margin:1rem 0}
#issue .bx-wrapper .bx-pager {float:none; padding:1rem 0}  
#issue .bx-controls-direction a {position:absolute; top:inherit; bottom:3rem; left:auto; -webkit-transform:translateY(-50%); transform:translateY(-50%); font-size:1.5rem; overflow:hidden; left:0; width:1.5rem; height:1.5rem; color:#fff; text-align:center; line-height:1.5rem; opacity:0.5; -webkit-transition:all 0.2s; 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; 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 .bx-wrapper .bx-pager.bx-default-pager a {font-size:0; color:transparent}

#issue.active {height:100%; z-index:50}
#issue.active .group {width:75rem; max-width:calc(100% - 1rem); margin-left:auto !important; margin-right:auto !important; visibility:visible; margin-top:0; opacity:1; -webkit-transition:all 0.2s; transition:all 0.2s}
#issue.active .control.open {display:none}


@media screen and (max-width:1280px){
	#issue .tt a {width:1.75rem; height:1.75rem; padding:0.2rem 0.4rem; right:13rem; top:1.6rem}
	#issue .control.open:before {font-size:1rem}
	#issue .control .count {left:1rem; top:0.5rem}
}

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

	#issue .tt a {right:15rem}
}
	
@media screen and (max-width:767px){
	#issue .tt a {right:3.5rem}	
	#issue .control.open em {display:none}
	#issue .control.open span.count > span {display:none}
	
	#issue .bx-controls-direction a {top: inherit}
	
	#issue .list li {width:295px !Important}
	#issue .bx-wrapper img {max-width:100%; display:block}
	#issue .bx-wrapper .bx-pager {padding-top:0}
}

@media screen and (max-width:415px){
	#issue .bx-controls-direction a {bottom:6rem}
}
@-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} 
}