.popup-wrap{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; text-align: center; overflow-y: auto; z-index: 1015; &:after{ content: ""; display: inline-block; height: 100%; width: 0; vertical-align: middle; } .popup-modal{ z-index: 1014; position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: .35; background: #000; } .popup-close{ background: url("./assets/newwork-close-icon.png") center no-repeat; background-color: rgba(0, 0, 0, 0.2); background-size: px2rem(13); width: px2rem(25); height: px2rem(25); position: absolute; top: px2rem(15); right: px2rem(15); cursor: pointer; @media #{$phone} { background-size: px2rem(18); } &:hover{ opacity: 0.7; } } .popup-box{ display: inline-block; vertical-align: middle; min-width: px2rem(563); position: relative; z-index: 1015; background-color: #1b1b1a; box-shadow: 0 2px 12px 0px rgba(0, 0, 0, 0.55); } .popup-hd{ height: px2rem(56); position: relative; } .popup-bd{ min-height: px2rem(200); margin: px2rem(15); color: rgba(255, 255, 255, 0.6); } .popup-hd-title{ text-align: center; height: px2rem(56); line-height: px2rem(56); font-size: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); em{ font-size: px2rem(24); color: #ffffff; vertical-align: middle; display: inline-block; position: relative; font-weight: bold; font-style: normal; } } } .msgbox-fade-enter-active { animation: msgbox-fade-in .3s; } .msgbox-fade-leave-active { animation: msgbox-fade-out .3s; } @keyframes msgbox-fade-in { 0% { transform: translate3d(0, -20px, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes msgbox-fade-out { 0% { transform: translate3d(0, 0, 0); opacity: 1; } 100% { transform: translate3d(0, -20px, 0); opacity: 0; } }