// === Modal === .modal { top: 0; left: 0; width: 100%; height: 0; overflow: hidden; background-color: rgba(23, 26, 28, 0); transition: height 0s 0.3s ease-out, z-index 0s 0.3s ease-out, background-color 0.3s 0s ease-out; will-change: height, background-color, contents; position: fixed; z-index: -77777; transform: translate3d(0, 0, 0); &__scroll { top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; text-align: center; transform: translate3d(0, 0, 0); -webkit-overflow-scrolling: touch; position: absolute; &::-webkit-scrollbar { width: 0; } &::before { content: ''; height: 100%; display: inline-block; vertical-align: middle; } } &__box { margin: 50px auto; position: relative; background-color: #fff; border-radius: 6px; text-align: left; overflow: hidden; box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.3); vertical-align: middle; display: inline-block; will-change: contents, transform, opacity; transform: translate3d(0, 0, 0) scale3d(0.95, 0.95, 1); transition: transform 0.2s cubic-bezier(0.39, 0.67, 0.59, 1.21), opacity 0.2s ease-out; opacity: 0; z-index: 1; &--show { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); opacity: 1; } } &__title { padding: 0 0 20px 0; font-size: 24px; font-weight: 600; } &__subtitle { padding: 0 0 30px 0; line-height: 1.3; } &__notice { padding: 20px 0 0 0; font-size: 14px; line-height: 1.3; color: #6a6e6f; } &__closeBtn { top: 20px; right: 20px; width: 40px; height: 40px; border: 0; transition: background-color 0.2s ease-out; background-color: rgba(255, 255, 255, 0.4); position: absolute; z-index: 3; &:hover { background-color: #fff; } &:active { transform: scale(0.9); } &::after, &::before { content: ''; top: 19px; left: 5px; width: 30px; height: 2px; background: #303430; position: absolute; } &::before { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } &::after { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } } &--open { height: 100%; max-height: 100vh; min-height: 100vh; background-color: rgba(32, 49, 60, 0.5); transition: height 0s 0s ease-out, z-index 0s 0s ease-out, background-color 0.3s 0s ease-out; z-index: 77777; } } @media (min-width: 1024px) { /* .modal { &__box { border-radius: 6px; } } */ } @media (max-width: 1024px) { .modal { &__box { margin: 0 auto; } &__title { padding-right: 50px; } } }