/* Main popup layer (index.jsp #layer1) - size comes from each popup's admin setting
   (content area width x height, data-w / data-h on the slide), applied by /js/popup_layer.js.
   Loaded after layout2.css / resize.css so these rules win. Also used by the admin popup preview. */
#layer1.pop-layer{height:auto;transition:width .3s ease;}
#layer1 .pop-conts{height:auto;margin:0 auto;transition:width .3s ease;}
#layer1 .swiper-wrapper{transition:height .3s ease;}
/* the picture is centered in the content area */
#layer1 .swiper-slide{overflow:hidden;display:flex;align-items:center;justify-content:center;}
#layer1 .swiper-slide > a{display:block;line-height:0;}
/* popup_layer.js sets the image to the largest size that fits the area keeping its ratio;
   until then (or without js) it is contained in the area */
#layer1 .swiper-slide img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;}
/* page dots right under the content */
#layer1 .pop-conts .swiper-pagination{position:relative;top:auto;bottom:auto;margin-top:8px;line-height:0;}
/* narrow popups (content < 400px, class set by popup_layer.js) : dots on the left, clear of "one day" */
#layer1.pl-narrow .pop-conts .swiper-pagination{text-align:left;}
/* close button above the content : swiper-bundle.css gives .swiper (the content area) z-index:1,
   so without this the content covers the corner of the X button */
#layer1 .btn-close-main-notice{z-index:10;}
/* rounded corners, concentric : inner radius = outer radius - layer padding (PC 10px, mobile 15px).
   the radius is on the picture itself, so its corners are round whatever its ratio */
#layer1.pop-layer{border-radius:24px;}
#layer1 .swiper-slide img{border-radius:14px;}
@media screen and (max-width:570px){
	#layer1.pop-layer{border-radius:24px 24px 0 0;}
	#layer1 .swiper-slide img{border-radius:12px;}
}