_research.scss 2.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. @charset "UTF-8";
  2. .research {
  3. &>.bg {
  4. top: 46%;
  5. }
  6. .copywriting {
  7. padding: 1.5em 1em 0em;
  8. .bg {
  9. height: 85%;
  10. }
  11. }
  12. .container {
  13. padding-bottom: 5em;
  14. }
  15. &__list {
  16. display: flex;
  17. justify-content: center;
  18. flex-wrap: wrap;
  19. width: 60em;
  20. margin: 0 auto;
  21. }
  22. &__item {
  23. margin: 0 1em 3em;
  24. display: flex;
  25. flex-direction: column;
  26. align-items: center;
  27. justify-content: flex-start;
  28. cursor: pointer;
  29. &:hover {
  30. .research__pic {
  31. box-shadow: 0 0 1em rgba($blue, 0.3);
  32. border: 0.2em solid $blue;
  33. transition: box-shadow 0.3s;
  34. }
  35. .research__name {
  36. background-color: $blue;
  37. transition: 0.3s;
  38. p {
  39. color: $white;
  40. transition: 0.3s;
  41. }
  42. }
  43. }
  44. }
  45. &__pic {
  46. border: 0.1em solid rgba($blue, 0.3);
  47. box-shadow: 0.4em 0.4em 0.6em rgba(#000, 0.1);
  48. border-radius: 0.5em;
  49. width: 15em;
  50. overflow: hidden;
  51. margin-bottom: 0.8em;
  52. img {
  53. width: 100%;
  54. height: auto;
  55. }
  56. }
  57. &__name {
  58. display: inline-block;
  59. border-radius: 1.5em;
  60. padding: 0.6em 1.5em;
  61. p {
  62. text-align: center;
  63. color: $blue-d;
  64. font-size: 1.2em;
  65. }
  66. }
  67. }
  68. @media screen and (max-width: 992px) {
  69. .research {
  70. .container {
  71. padding-bottom: 10em;
  72. }
  73. .copywriting {
  74. padding: 3em 0 3em;
  75. }
  76. &__item {
  77. margin: 0 0 3em;
  78. width: 48%;
  79. &:hover {
  80. .research__pic {
  81. border: 0.4em solid $blue;
  82. }
  83. }
  84. }
  85. &__pic {
  86. width: 25em;
  87. border-radius: 1.5em;
  88. box-shadow: 1em 1em 2em rgba(#000, 0.1);
  89. margin-bottom: 1em;
  90. }
  91. &__name {
  92. border-radius: 2.5em;
  93. padding: 0.8em 2.5em;
  94. p {
  95. font-size: 2.1em;
  96. white-space: nowrap;
  97. }
  98. }
  99. }
  100. }