.banner-area { display: flex; justify-content: center; width: 100%; }
.banner-area > div { width: 100%; }
.banner-area > div > div { position: relative; width: 100%; }
.banner-area a { position: absolute; top: 0; left: 0; width: 100%; border-radius: 10px; overflow: hidden; cursor: pointer; }
.banner-area img { width: 100%; opacity: 0; transition: opacity 350ms; }
.banner-area.show img { opacity: 1; }

.banner-area.banner-body { padding: 0 15px; }
.banner-area.banner-list { padding: 0 15px; display: none; }
.banner-area.banner-top { padding: 0 20px; }

.banner-area.banner-body > div { max-width: 380px; }
.banner-area.banner-body > div > div { margin-bottom: 12px; }
.banner-area.banner-list > div > div { margin: 5px 0 30px; }
.banner-area.banner-top > div > div { margin-bottom: 15px; }

@media screen and (min-width: 500px) { /* 태블릿 */

	.banner-area.banner-body > div > div { margin-bottom: 15px; }

}

@media screen and (min-width: 690px) { /* 두줄보기 플립 */

	.banner-area.banner-body { display: none!important; }
	.banner-area.banner-body.nolist { display: flex!important; }
	.banner-area.banner-list { display: flex; }

}

@media screen and (min-width: 1024px) { /* 두줄보기 */

	.banner-area.banner-list { padding-left: 20px; padding-right: 20px; }

}

.banner-area.banner-body.on { display: flex; }






#img-banner-pop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; min-width: 320px; }
#img-banner-pop .back { justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; transition: opacity 500ms; }
#img-banner-pop .wrap { position: relative; width: 100%; height: 100%; transform: translateY(100%); transition: transform 500ms; transition-timing-function: cubic-bezier(0.4, 0, 0, 1); }
#img-banner-pop .wrap2 { display: flex; flex-direction: column; width: 100%; max-width: 600px; height: 100%; background: #fff; pointer-events: auto; }
#img-banner-pop .header { border-bottom: 1px solid #e5e5e5;
		padding-top: constant(safe-area-inset-top);
		padding-top: env(safe-area-inset-top); }
#img-banner-pop .btn.close { float: right; padding: 3px; cursor: pointer; }
#img-banner-pop .x-bar { width: 27px; height: 27px; top: 0; margin: 0; }
#img-banner-pop .x-bar::before { top: 13px; left: 6px; width: 15px; }
#img-banner-pop .x-bar::after { top: 13px; left: 6px; width: 15px; }
#img-banner-pop .body { position: relative; flex: 1; display: flex; align-items: safe center; overflow-y: auto; overscroll-behavior: contain; }
#img-banner-pop img { width: 100%; }
#img-banner-pop .loading { display: none; position: absolute; top: 50%; left: 50%; margin: -13px 0 0 -13px; width: 26px; height: 26px; border: 2px solid #333; z-index: 10;
	border-radius: 50px; border-right-color: transparent; pointer-events: none; }
#img-banner-pop.loading .loading { display: block; animation: spin 800ms infinite linear; }

#img-banner-pop.show { display: block; }
#img-banner-pop.on .back { opacity: 0.35; }
#img-banner-pop.on .wrap { transform: translateY(0); }

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

	#img-banner-pop .body {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom); }

}

@media screen and (min-width: 500px) {

	#img-banner-pop .wrap { display: flex; justify-content: safe center; align-items: center; padding: 20px; pointer-events: none;
		padding-bottom: max(constant(safe-area-inset-bottom), 20px);
		padding-bottom: max(env(safe-area-inset-bottom), 20px); }
	#img-banner-pop .wrap2 { border-radius: 5px; box-shadow: 0 0 20px rgba(0,0,0,0.2); overflow: hidden; }
	html.dark #img-banner-pop .wrap2 { box-shadow: 0 0 20px #000; }

}

html.dark #img-banner-pop .wrap2 { background-color: #222; }
html.dark #img-banner-pop .header { border-color: #444; }