@import '@/styles/_support.scss'; .comp { position: fixed; top: 0; left: 0; z-index: 2000; width: 100%; height: 100%; @extend .fcc; text-align: center; font-size: 28px; } .hide { display: none; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba($color: #000000, $alpha: 0.7); } .border { position: relative; @include border-tans(20px); } .modal { position: relative; max-width: 900px; margin: 0 auto; .title { padding-top: 32px; font-size: $articleTitleLarge; font-weight: bold; } &-content { padding: 60px 60px 72px; // max-height: 534px; max-height: 70vh; overflow-y: auto; } &-btn-wrap { display: flex; justify-content: center; .btn { @include btc4(144px, 42px, 16px); margin: 36px 24px 36px; @extend .pointer; } .disable { background-image: none; background-color: $cFontGray3; } } } .close { position: absolute; right: -55px; top: -15px; cursor: pointer; img { position: relative; width: 30px; height: 30px; } } @media (max-width: 1150px) { .close { right: -15px; top: -55px; } } @media (max-width: 1000px) { .border { width: 90%; } } @media (max-width: 768px) { .border { width: 80%; .modal { .modal-content { flex-wrap: wrap; padding: 32px 16px; } .modal-btn-wrap { .btn { margin: 24px 12px 24px; } } } } }