<style>
#layerpopup{display: none;}
#layer_bg #popup label { font-size:1.3em; color:#fff; font-weight:600; line-height: 25px; vertical-align: super;padding: 2.5px 20px;background: #a32330; border-radius:3px;}
#layer_bg #popup h2 { font-size:1.4em; color:#575757; font-weight:500; margin-top: 6px;}
#layer_bg #popup a { font-size:1.4em; color:#fff; font-weight:500; margin: 2px; padding: 5px 15px; background: #354c28;}
#layer_bg #popup .kkao { font-size:1.4em; color:#000100; font-weight:500; margin: 2px; padding: 5px 8px; background: #fae100;}
#layerpopup + label{display: inline-block;padding: 5px 14px;background: #a32330; font-size:1.4em; font-weight: 500; color:#fff ;}
#layer_bg{z-index:99; display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0, 0.8);}
#layerpopup:checked+label+#layer_bg{display: block;}
#layer_bg>#popup{z-index:99; position: absolute;width:300px; height:200px; padding:15px;box-sizing: border-box;border: 4px double #c1c1c1;border-radius:15px;box-shadow: 0px 0px 5px 0.5px white; top: 50%;left: 50%;transform: translate(-50%,-50%);background: #fff;}
#layer_bg>#popup>h2{margin-bottom: 20px ;}
#layer_bg>#popup>h2>label{float: right;}
</style>
 
<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelector('#layer_bg').addEventListener('click', function (evt) {
        if (evt.target == this) {
            document.querySelector('#layerpopup').checked = false;
        }
    });
});
</script>
 
    <input type="checkbox" id="layerpopup">
    <label for="layerpopup">공지확인</label>
    <div id="layer_bg">
        <div id=popup>
            <label for="layerpopup">닫기</label>
            <h2>어서오세요</h2>
            <p><a href="/bbs/register.php">회원등록</a><a href="/bbs/login.php">로그인</a></p>
        </div>
    </div>