123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 |
- @charset "UTF-8";
- .research {
- &>.bg {
- top: 46%;
- }
- .copywriting {
- padding: 1.5em 1em 0em;
- .bg {
- height: 85%;
- }
- }
- .container {
- padding-bottom: 5em;
- }
- &__list {
- display: flex;
- justify-content: center;
- flex-wrap: wrap;
- width: 60em;
- margin: 0 auto;
- }
- &__item {
- margin: 0 1em 3em;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: flex-start;
- cursor: pointer;
- &:hover {
- .research__pic {
- box-shadow: 0 0 1em rgba($blue, 0.3);
- border: 0.2em solid $blue;
- transition: box-shadow 0.3s;
- }
- .research__name {
- background-color: $blue;
- transition: 0.3s;
- p {
- color: $white;
- transition: 0.3s;
- }
- }
- }
- }
- &__pic {
- border: 0.1em solid rgba($blue, 0.3);
- box-shadow: 0.4em 0.4em 0.6em rgba(#000, 0.1);
- border-radius: 0.5em;
- width: 15em;
- overflow: hidden;
- margin-bottom: 0.8em;
- img {
- width: 100%;
- height: auto;
- }
- }
- &__name {
- display: inline-block;
- border-radius: 1.5em;
- padding: 0.6em 1.5em;
- p {
- text-align: center;
- color: $blue-d;
- font-size: 1.2em;
- }
- }
- }
-
- @media screen and (max-width: 992px) {
- .research {
- .container {
- padding-bottom: 10em;
- }
- .copywriting {
- padding: 3em 0 3em;
- }
- &__item {
- margin: 0 0 3em;
- width: 48%;
- &:hover {
- .research__pic {
- border: 0.4em solid $blue;
- }
- }
- }
- &__pic {
- width: 25em;
- border-radius: 1.5em;
- box-shadow: 1em 1em 2em rgba(#000, 0.1);
- margin-bottom: 1em;
- }
- &__name {
- border-radius: 2.5em;
- padding: 0.8em 2.5em;
- p {
- font-size: 2.1em;
- white-space: nowrap;
- }
- }
- }
- }
|