@charset "utf-8";

/* 애니메이션 */
.shadow{display:none;opacity:0;width:100%; height:100%; position:fixed; padding-bottom:0px;top:0; left:0; z-index:-1 !important; background-size:cover;background:rgba(0,0,0,0.50) !important;}

.layer-wrap{
    z-index:9997 !important;
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
}
.layer-wrap:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -.25em;
}
.pop-layer {
    position:relative;
    box-sizing:border-box;
    display: inline-block;
    vertical-align: middle;
    width: 400px;
    height: auto;
    border-top:6px solid /*#f39a00*/#139bb8;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    background:#fff;
}
/* .pop-sharer{
    z-index: 9999 !important;
	box-sizing: border-box;
	display:inline-block;
    width: 218px;
    height: auto;
    vertical-align: middle;
    text-align: center;
    border-top:6px solid #f39a00;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
} */
.pop-container{position:relative; padding: 1rem 1rem 1.5rem;}
.pop-container .skip{position:absolute;left:-9999px; width:1px; height:1px;font-size:0;line-height:0;overflow:hidden;visibility:hidden;}
.pop-container .frame{z-index:9999;position:relative;overflow:hidden;margin:0;width:100%;height:auto;}
.btn-layer-close{position:absolute; top: -3rem; right: 0px; display:inline-block;width:23px;height:24px;background:url("https://file.valofe.com/Valofe_file/web/vfun/images/common/popup/pop-x.png") 0 0 no-repeat;background-size:contain;text-indent:-9999px;z-index:1;}

.pop-container .frame h1{box-sizing:border-box;width:100%;padding:32px 0 0 0;padding: 2rem 0 0 0 ; /*margin-bottom: 16px;*//*margin-bottom:1rem;*/
    font-size:24px;font-size:1.5rem;letter-spacing:0.2px;color: #000; background:none;text-align:center;
    letter-spacing:0.5px;}
.pop-container .frame h1 img{width:160px;}
.pop-container .alert {width:100%;padding-top:16px;/*41ㅔㅌ 미션 아이템 교환*/line-height:1.4; text-align:center;}
.pop-container .btn-wrap{margin-top:30px;}
ul#socialList{width: 300px; display:inline-block; margin:36px auto;}
#socialList li { float:none; margin-top:10px;}
#socialList li:first-child { margin-top:0;}
#socialList li a { display:inline-block; border-radius: 1.5rem; width:100%; padding:0.5rem 0 ; text-align:center; font-size:16px; font-size: 1rem; color:#fff; font-weight: normal;}
.btn-fb a{background:#40589f;transition: all .75s }
.btn-tw a{background:#3eb0ed;transition: all .75s }
.btn-gg a{background:#cd3c2a;transition: all .75s }

.btn-fb a:hover{text-decoration:none;background:#40589f;}
.btn-tw a:hover{text-decoration:none;background:#3eb0ed;}
.btn-gg a:hover{text-decoration:none;background:#cd3c2a;}

.pop-container .alert div.desc {
    width: 300px;
    display: inline-block;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 16px;
    padding-top: 32px;
    border-top: 1px solid rgba(0,0,0,0.15);
    font-size: 12px;
    font-size: 0.75rem;
    font-weight: normal;
    line-height:1.7;
    color: #000;
    letter-spacing:0.5px;
    font-family: Arial, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}
.pop-container .alert div.desc a, .pop-container .alert div.desc a:visited{color:#000; font-weight:bold; text-decoration:underline; letter-spacing:0.5px; font-family: Arial, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";}
.pop-container .alert div.desc a:hover{text-decoration: underline; letter-spacing:0.5px;font-family: Arial, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";}
@-webkit-keyframes aninone {
    from {}
    to {}
}

@-webkit-keyframes colorChange {
    from {
        background:#238ba3;
    }
    to {
        background:#35a1ba;
    }
}

@-webkit-keyframes lineChange {
    from {
        border:2px solid #238ba3;
        color:#238ba3;
    }
    to {
        border:2px solid #35a1ba;
        color:#35a1ba;
    }
}

/* 로그인기록 */
#loginHistory .pop-container .frame h1 {border-bottom:none;}
#loginHistory .pop-container .frame .fa {line-height: inherit;}

@media screen and (max-width:1580px){


}
@media screen and (max-width:640px) {
    .pop-container {padding: 16px 16px 20px;}
    .pop-layer{width:80%;}
}

@media screen and (max-width: 640px){

}
@media screen and (max-width: 640px){

}
@media screen and (max-width: 360px){

}
@media screen and  (max-height: 812px) and (orientation : landscape){
    .pop-container  {
        overflow-y: scroll;
        max-height: 70vh;
    }
}

/*오늘하루안보기 있을 때만 사용*/
/*.pop-container .today-close{display:inline-block; position:absolute; top:-40px; left:0;width:calc(100% - 80px);height:40px;line-height:30px;font-size: 16px; color:#fff;text-shadow:0px 1px #000;text-align:left;text-decoration:none;font-family:'Notokr','Titillium Web',AppleSDGothicNeo,'Dotum',Sans-serif;
    font-weight:300;
    font-style: normal;}
.pop-container .today-close:hover{color:#F46032;}*/


@media screen and (max-width:1024px){
    .pop-layer {
        width:90vw;
    }

}