.popup_banner {width: 100%; max-width: 500px; position: fixed; z-index: 999; top: 15%; left: 5%;}
.popup_banner .popup_area {width: 100%; position: relative; background: #4d5ae1; border-radius: 10px 10px 0 0;}
.popup_banner .popup_area .banner {display: block; width: 100%; height: 100%; object-fit: contain;}
.popup_banner .btn_view {display: -webkit-flex; display: flex; justify-content: center; align-items: center; width: 200px; height: 40px; background: #222222; border-radius: 999px; font-size: 1.125em; font-weight: 600; color: var(--white); position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);}

.popup_banner .btn_area {width: 100%; padding: 14px 20px; display: -webkit-flex; display: flex; justify-content: end; align-items: center;}
.popup_banner .btn_area input[type="checkbox"] + label {color: var(--white);}
.popup_banner .btn_area .hd_pop_close {display: block; margin-left: 10px;}
.popup_banner .btn_area .hd_pop_close img {width: 19px; display: block;}
.popup_banner .btn_area .pop_close {display: block; margin-left: 10px;}
.popup_banner .btn_area .pop_close img {width: 19px; display: block;}

input[type=checkbox] + label::before {color: var(--white);}
input[type=checkbox]:checked + label::before {color: #ffd745;}

@media screen and (max-width:768px){
    .popup_banner {width: calc(100% - 100px); left: 50%; transform: translateX(-50%);}
}

@media screen and (max-width:480px){
    .popup_banner {width: calc(100% - 32px);}
    .popup_banner .btn_area {padding: 8px 20px;}
    .popup_banner .btn_view {width: 160px; height: 34px; font-size: 1em; bottom: 8px;}
}

@media screen and (max-width:360px){
    .popup_banner .btn_view {width: 140px; height: 30px; bottom: 6px;}
}