@import '@/styles/_support'; .comp { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; @extend .fcc; text-align: center; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba($color: #000000, $alpha: 0.7); } .modal { position: relative; width: 45.5rem; min-height: 18.25rem; border-radius: $borderRadius; background-color: #ffffff; &-title { position: relative; @extend .bb; @include border-top-radius($borderRadius); @include ellipsis(1); font-size: $fontSizeTitle; font-weight: bold; height: 5rem; line-height: 5rem; // font-weight: bold; background-color: #f2f2f2; text-align: left; padding: 0 3rem; .close-btn { position: absolute; top: 2rem; right: 2rem; } } &-icon-wrap { @extend .fcc; height: 12rem; } &-content { @extend .fcc; @extend .bb; font-size: $fontSize; font-weight: bold; min-height: 13.25rem; padding: $marginMedium-M 3rem; } &-btn-wrap { display: flex; justify-content: center; .btn { @include btc2(12rem, 3.6rem, 16px); margin: 3rem 1rem 0; @extend .pointer; } } } .hide { display: none; } @media (max-width: 1200px) { .comp { position: fixed; } .modal { position: absolute; } } @media (max-width: 768px) { .modal { width: 90%; height: auto; top: 20%; &-title {} &-icon-wrap { height: 10rem; img { height: 100%; } } } }