@charset "utf-8";

/* 자동로그아웃 팝업  */
.popup_logout { 
	position: fixed; display: flex; justify-content: center; flex-direction: row; opacity: 0; top: 0; left: 0;  
	width: 100%; height: 100vh; align-items: center; z-index: -1; transition: all 0.3s;
	&::after { position: absolute; content: ''; display: block; top: 0; left: 0; width: 100%; height: 100vh; background:rgba(0, 0, 0, 0.7); }
	&.open { opacity: 1; z-index: 110; }
    .size_500 { max-width: 500px; }
	.layer_box_01 {
		display: flex; align-items: center; justify-content: flex-start; flex-direction: column; position: relative; z-index: 111; width: 800px; 
		border-radius: 10px; outline-color: transparent; transition: outline-color 0.1s; background: var(--hl-white); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
        .t_red { color: #dc0000; }
		> .layer_top { width: 100%; font-size: 2.2rem; text-align: center; padding: 16px 10px; border-radius: 10px 10px 0 0; background: var(--hl-icegray-10); }
		> .layer_con { 
            width: 100%; text-align: center; padding: 20px 10px; word-break: keep-all;
            > .tit_s { font-size: 2.0rem; }
            > .t_body { font-size: 1.7rem; }
		}
		> .layer_bottom { display: flex; justify-content: center; gap: 20px; width: 100%; padding: 20px; 
            .btn_01 { font-size: 1.8rem; color: #fff; padding: 8px 10px; border-radius: 8px; background: #6167C9; 
                &:hover, 
                &:active { background: #494582; }
                &:focus { outline: 2px solid #fff; }
            }
            .btn_02 { font-size: 1.8rem; padding: 8px 10px; border-radius: 8px; background: #ddd; 
                &:hover, 
                &:active { background: #bfbfbf; }
                &:focus { outline: 2px solid #fff; }
            }
        }
	}
	@media screen and (max-width:1024px) { 
		.layer_box_01 { width: 80%; }
	}
	@media screen and (max-width:500px) { 
        .size_500 { width: 90%; }
		.layer_box_01 { width: 90%; }
        .layer_box_01 > .layer_top { font-size: 2.0rem; }
        .layer_box_01 > .layer_bottom { padding: 20px 10px; }
        .layer_box_01 > .layer_con > .tit_s { font-size: 1.8rem; }
        .layer_box_01 > .layer_con > .t_body { font-size: 1.6rem; }
        .layer_box_01 > .layer_bottom > .btn_01,
        .layer_box_01 > .layer_bottom > .btn_02 { font-size: 1.6rem; }
	}
}