@import '@/styles/_support.scss'; .comp { position: fixed; top: 0; left: 0; z-index: 5000; width: 100%; height: 100%; @extend .fcc; text-align: center; font-size: 28px; } .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; @extend .bb; max-width: 900px; margin: 0 auto; &-content { display: flex; justify-content: flex-start; align-items: center; padding: 72px 60px; max-height: 534px; .info-icon { width: 210px; min-width: 210px; img { width: 100%; } } .message { margin-left: 48px; font-weight: bold; color: $cOrange2; display: inline-block; height: 100%; min-width: 100px; text-align: justify; text-align-last: left; span { cursor: pointer; text-decoration: underline; } } .lsp { line-height: 1.4; } .lsp:lang(zh) { letter-spacing: 0.7px; } } } .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; .info-icon { margin: 0 auto; width: 32%; min-width: auto; } .message { margin: 16px auto 0; font-size: 20px; } } } } }