*{
	margin: 0;
	padding: 0;
}


.imgList {
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.modal {
	display: none;
	
	width: 100%;
	height: 100%;
	position: fixed;
	top : 0;
    left : 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index:10000;
}


.modalBox {
    position: absolute;
    text-align: center;
    top : 45%;
    left : 50%;
    width: 500px;
    max-height: 50%;
    position : sticky;
    
    transform: translate(-50%, -50%);
    z-index:500;
}


.modalF { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 10000; }
.mdW { position: relative; top: 50%; left: 50%; width: 340px; max-height: 50%; transform: translate(-50%, -50%); padding:48px; text-align: center; background-color: #fff; color:#2e2e2e; }
.mdW > img { text-align: center; }
.mdW .mdTit { padding: 24px 0; font-size: 24px; font-weight: 600; border-bottom: 1px solid #dbdbdb; }
.mdW .mdTxt { padding: 16px 0px 0 16px; text-align: start; }
.mdW .mdTxt > li { position: relative; margin-bottom: 8px; line-height: 150%; }
.mdW .mdTxt > li:before { position: absolute; top: 10px; left: -12px; content: " "; width: 6px; height: 1px; background-color: #2e2e2e; }
.mdW > .closeBtn { position: absolute; right: 0; top: 0; width: 44px; height: 44px; font-size: 2rem; color:transparent; font-size:0;}
.mdW > .closeBtn:before, .mdW > .closeBtn:after {position: absolute; top:2px; content:' '; height: 40px; width: 3px; background-color: #2e2e2e; border-radius: 100px; }
.mdW > .closeBtn:before {transform: rotate(45deg);}
.mdW > .closeBtn:after {transform: rotate(-45deg);}