@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; -webkit-transform: translateY(-50%); 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%; -webkit-transform: translate(-50%, -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 { -webkit-animation: spread 1.25s infinite; animation: spread 1.25s infinite; }

#issue .group { width: 128rem; max-width: 100%; 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 .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: 10000%; margin: 0; opacity: 0.9; background: linear-gradient(272deg, #325D96 23.38%, #237E86 71.16%); }

#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 { font-family: "remixicon"; content: '\eb99'; transition: all 0.2s; }
#issue .control.close:hover::after, #issue .control.close:focus::after { transform: rotate(180deg); }

#issue .bx-controls-direction a { position: absolute; top: 50%; left: auto; -webkit-transform: translateY(-50%); 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; -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; }
#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; -webkit-transition: all 0.2s; transition: all 0.2s; }

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

.popup-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem 3rem;
	margin-bottom: 4rem;
	color: #fff
}
.popup-title h2 {
	font-size: 5.7rem;
	font-family: "TheJamsil";
}
.popup-title p {
	display: flex;
	align-items: center;
	padding: 1rem 2.5rem;
	border-radius: 5rem;
	background: rgba(0, 0, 0, 0.20);
	backdrop-filter: blur(2.2rem);
	font-size: 1.6rem;
}
.popup-title p .count {
	padding: 0 .2rem 0 .5rem;
	color: #86D73E;
	font-size: 2.4rem;
	font-weight: 700;
}
#issue .swiper-wrap {
	position: relative;
}
#issue .swiper-slide {
	width: 35.8rem;
	aspect-ratio: 1/1;
}
#issue .swiper-slide a {
	width: 100%;
	height: 100%;
	display: block;
	overflow: hidden;
}
#issue .swiper-slide a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#issue .btn-wrap {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 7.5rem;
}
#issue .btn-wrap .control {
	height: 5rem;
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: 0 3rem;
	border-radius: 5rem;
	background: #000;
	color: #fff;
	margin-top: 0;
	line-height: 5rem;
}
#issue .btn-wrap .control.oneday {
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.15)
}
#issue .swiper-button-next, #issue .swiper-button-prev {
	width: auto;
	height: auto;
	margin-top: 0;
	color: #fff;
	font-size: 4rem;
	transform: translateY(-50%);
}
#issue .swiper-button-next {
	right: -5rem;
}
#issue .swiper-button-prev {
	left: -5rem;
}
#issue .swiper-button-next::after, #issue .swiper-button-prev::after {
	display: none;
}

@media (min-width: 481px) {
  #issue .swiper-wrap.item2 .swiper-wrapper {
    justify-content: center;
  }
}
@media(max-width: 1024px) {
	.swiper-wrap {
		padding: 0 5rem;
	}
}
@media(max-width: 1024px) {
	.popup-title h2 {
		font-size: 4rem;
	}
	#issue .swiper-button-next {
		right: 0;
	}
	#issue .swiper-button-prev {
		left: 0;
	}
	.popup-title p {
		padding: .5rem 2rem;
	}
}