@charset "utf-8";

/*=================================================================================
 * pc, m 공통 popup css 추가
 =================================================================================*/

.layer_toast { background:hsla(0,0%,7%,.6);border-radius:25px;color:#fff;font-size:14px;left:50%;line-height:22px;padding:11px 32px;position:fixed;top:90px;-webkit-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap;z-index:10000;text-align: center; }
.message_layer { background: rgba(0,0,0,.4); bottom: 0; left: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 400; }

.popup-list{display:flex; flex-wrap:wrap; justify-content:space-between;}

.member-popup{display: block; position: absolute; left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.member-popup .popup-terms{display: block; margin:30px ; padding: 40px 40px 30px; width: 500px; height: auto; overflow: hidden; background: #fff; border:1px solid #ddd; text-align:center;}
.member-popup .popup-terms .popup-header{display: flex; align-items: center;}
.member-popup .popup-terms .popup-header .title{font-size: 24px; font-weight: 500; color: #000; flex:auto;}
.member-popup .popup-terms .popup-header .btn-close{line-height: normal; width: 16px; height: 16px; margin-left: auto;}
.member-popup .popup-terms .popup-body{overflow-y: auto; margin-top: 35px; text-align:center;}
.member-popup .popup-terms .popup-body .terms_cont_tt{font-size: 15px; font-weight: 300; color: #000;}
.member-popup .popup-terms .popup-body p{font-size:16px; color:#333; line-height:24px;}
.member-popup .popup-terms .popup-body h4{padding:20px 0;}
.member-popup .membership-btn { margin-bottom: 0px; display: flex; justify-content:center;} 
.member-popup .membership-btn button{height:55px; margin:30px 8px 0 8px; width:100%;}
.member-popup .btn-type01.btn-cancel{background:#999;}
.member-popup .btn-type01{ background: #2068bd; width: 100%; height: 60px; font-size: 15px; font-weight: 500; color: #fff; padding: 18px; line-height: 22px; } 

.dim_text { display: flex; align-items: center; justify-content: center; height: 100%; color: white; font-size: 35px; }

/*ico*/
.member-popup .btn-close .ico-popup-close { width: 16px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M15 15 1 1m0 14L15 1 1 15Z' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } 
/* spinner */
.loader { /* color: #2068bd;*/ color: white; font-size: 4px; width: 1em; height: 1em; border-radius: 50%; position: relative; text-indent: -9999em; animation: mulShdSpin 1.3s infinite linear; transform: translateZ(0); display:inline-block; }

@media screen and (max-width:768px) {
.dim_text { font-size: 24px; }
.member-popup .popup-terms{width:320px; padding:30px 9px;}
.member-popup .popup-terms .popup-header .title{font-size: 18px;}
.member-popup .popup-terms .popup-body p{font-size:15px;line-height:22px;}
.member-popup .popup-terms .popup-body .btn-type01{height:50px; line-height:14px;}
.member-popup .membership-btn button{height:35px;}
}

@keyframes mulShdSpin {
0%,
100% { box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; }
12.5% { box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }
25% { box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }
37.5% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; }
50% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; }
62.5% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; }
75% { box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; }
87.5% { box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; }
}