@charset "UTF-8";
/*
 *  File Name : /event/resources/css/responsive/layerpopup.css
 *  Description : [공통] 레이어팝업 관련 스타일
 */

/* layerpopup (body-popup-common) */
.body-popup-common {display: none; justify-content: center; align-items: center; z-index: 1000; position: fixed; left: 0; top: 0; width: 100%; height: 100%;}
.body-popup-common:after {content: ""; z-index: -1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); background: linear-gradient(180deg, rgba(21, 1, 67, 0.30) 22.61%, rgba(18, 18, 18, 0.00) 53.24%), rgba(18, 18, 18, 0.90);}
.body-popup-common  * {color: #fff;}
.body-popup-common .layer-wrapper {position: relative; height: 100%; padding-top: 100px; text-align: center; box-sizing: border-box;}
.body-popup-common .layer-wrapper .layer-header {font-family: var(--ft-family_Poppins-700);}
.body-popup-common .layer-wrapper .layer-contents {font-family: var(--ft-family_Poppins-500);}
.body-popup-common.show {display: flex;}

/* layerpopup (layerpopup-notice-comm) */
.layerpopup-notice-comm .layer-wrapper .layer-header {color: #FAFAFA; font-size: 46px;}
.layerpopup-notice-comm .layer-wrapper .layer-contents {margin-top: 10px;}
.layerpopup-notice-comm .layer-wrapper .layer-contents .content {color: #DBD4EC; font-family: var(--ft-family_Poppins-300); font-size: 24px; line-height: 1.6;} 
.layerpopup-notice-comm .layer-wrapper .layer-footer {margin-top: 30px;}
.layerpopup-notice-comm .layer-wrapper .layer-footer .btn-return,
.layerpopup-notice-comm .layer-wrapper .layer-footer .btn-return .txt {color: #FED800; font-family: var(--ft-family_Poppins-600); font-size: 34px;}
.layerpopup-notice-comm .layer-wrapper .layer-footer .btn-return .txt {text-decoration: underline;}

/* 
 *  [해상도 481px ~ 768px] *
 *  1. 481px ~ 768px
 *  - 모바일 가로모드
 *  - 태블릿 세로모드 *
 *  2. 768 기준 / DPR 1 / 7.68
 */
@media all and (max-width:768px) {
    /* layerpopup (layerpopup-notice-comm) */
    .layerpopup-notice-comm .layer-wrapper .layer-header {font-size: 5.99vw;}
    .layerpopup-notice-comm .layer-wrapper .layer-contents {margin-top: 1.302vw;}
    .layerpopup-notice-comm .layer-wrapper .layer-contents .content {font-size: 3.125vw;} 
    .layerpopup-notice-comm .layer-wrapper .layer-footer {margin-top: 3.906vw;}
    .layerpopup-notice-comm .layer-wrapper .layer-footer .btn-return,
    .layerpopup-notice-comm .layer-wrapper .layer-footer .btn-return .txt {font-size: 4.427vw;}
}