123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. @charset "UTF-8";
  2. html,body {
  3. width: 100%;
  4. max-width: 100%;
  5. }
  6. .wrapper {
  7. width: 100%;
  8. font-size: 16px;
  9. }
  10. .modal-mgm {
  11. button.close {
  12. position: absolute;
  13. top: 5px;
  14. right: 5px;
  15. width: 30px;
  16. height: 30px;
  17. opacity: 1;
  18. z-index: 1;
  19. img {
  20. width: 100%;
  21. height: auto;
  22. }
  23. }
  24. .modal{
  25. &-dialog {
  26. margin: 0 1rem;
  27. &-centered::before {
  28. height: calc(90vh - 1rem);
  29. }
  30. }
  31. &-content {
  32. border-radius: 10px;
  33. }
  34. &-body {
  35. display: flex;
  36. flex-direction: column;
  37. align-items: center;
  38. justify-content: flex-start;
  39. padding: 45px 20px 25px;
  40. img {
  41. width: 100%;
  42. height: auto;
  43. image-rendering: pixelated;
  44. image-rendering: -webkit-optimize-contrast;
  45. }
  46. p {
  47. color: $blue;
  48. font-size: 16px;
  49. font-weight: 400;
  50. margin-bottom: 20px;
  51. }
  52. .mgm {
  53. &__pic {
  54. width: 275px;
  55. margin-bottom: 23px;
  56. }
  57. &__title {
  58. width: 212px;
  59. margin-bottom: 15px;
  60. }
  61. &__btn {
  62. width: 209px;
  63. }
  64. }
  65. }
  66. }
  67. }
  68. .pc{
  69. display: none;
  70. }
  71. @media screen and (min-width: 500px) {
  72. .pc {
  73. display: block;
  74. position: fixed;
  75. width: 100%;
  76. height: 100%;
  77. top: 0;
  78. bottom: 0;
  79. left: 0;
  80. right: 0;
  81. z-index: 999;
  82. background-color: #000;
  83. &__bg {
  84. position: absolute;
  85. width: 150%;
  86. height: 150%;
  87. background: url(https://d1xzlli46wohoc.cloudfront.net/images/indexPage/bg.jpg) no-repeat center center/cover;
  88. filter: grayscale(10%) blur(30px) ;
  89. }
  90. &__pic {
  91. position: absolute;
  92. top: 50%;
  93. left: 50%;
  94. transform: translate(-50%,-50%);
  95. width: 80%;
  96. height: auto;
  97. img {
  98. width: 100%;
  99. height: auto;
  100. image-rendering: pixelated;
  101. image-rendering: -webkit-optimize-contrast;
  102. }
  103. }
  104. }
  105. }