관리-도구
편집 파일: _team.scss
@use '../../utils' as *; /*----------------------------------------*/ /* 7.18 team css start /*----------------------------------------*/ .tp-team { &-item { &:hover { & .tp-team-thumb { & img { transform: scale(1.2); } } & .tp-team-social { & a { opacity: 1; visibility: visible; &:nth-child(1){ transform: translateX(0px); } &:nth-child(2){ transform: translateX(0px); } &:nth-child(3){ transform: translateX(0px); } &:nth-child(4){ transform: translateX(0px); } } } } } &-thumb { overflow: hidden; & img { width: 100%; transition: 1.3s all ease; } } &-social { position: absolute; bottom: 20px; left: 20px; & a { display: inline-block; height: 30px; width: 30px; line-height: 30px; text-align: center; color: var(--tp-theme-1); background-color: var(--tp-common-white); opacity: 0; visibility: hidden; &:nth-child(1){ transition: .3s; transform: translateX(-20px); } &:nth-child(2){ transition: .5s; transform: translateX(-30px); } &:nth-child(3){ transition: .7s; transform: translateX(-40px); } &:nth-child(4){ transition: .9s; transform: translateX(-50px); } &:hover { background-color: var(--tp-theme-1); color: var(--tp-common-white); } &:not(:last-child){ margin-right: 7px; } } } &-author-info { & span { font-size: 16px; font-weight: 400; line-height: 26px; @media #{$lg,$md,$xs}{ font-size: 14px; } &::before{ content: ''; height: 1px; width: 38px; display: inline-block; margin-right: 10px; transform: translateY(-4px); background-color: var(--tp-theme-1); } } } &-title { font-size: 28px; font-weight: 700; margin-bottom: 5px; @media #{$xxl}{ font-size: 24px; } @media #{$xl}{ font-size: 22px; } @media #{$lg,$md,$xs}{ font-size: 18px; } & a { background-repeat: no-repeat; background-size: 0% 1px, 0 1px; background-position: 100% 100%, 0 100%; transition: background-size 0.6s linear; background-image: linear-gradient(#000000, #000000), linear-gradient(#000000, #000000); &:hover { background-size: 0% 1px, 100% 1px; } } &-box { @media #{$md,$xs}{ margin-bottom: 30px; } } } &-top-text { margin-left: -35px; @media #{$lg,$md,$xs}{ margin-left: 0; } & p { @media #{$xl,$lg,$md,$xs}{ font-size: 14px; } } } } .tp-team-style-2 { & .tp-team-item { &:hover { & .tp-team-social-box { transform: scaleY(1); -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -ms-transition-delay: 300ms; -o-transition-delay: 300ms; transition-delay: 300ms; } } } & .tp-team-social-box { position: absolute; bottom: 20px; right: 20px; display: flex; flex-direction: column; border-top-left-radius: 10px; border-top-right-radius: 10px; transform: scaleY(0); transform-origin: center; transform-style: preserve-3d; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; transform-origin: bottom center; z-index: 2; & a { display: inline-block; height: 30px; width: 30px; line-height: 30px; text-align: center; margin: 5px 0; transition: .3s; color: var(--tp-common-white); background-color: rgba(255, 255, 255, 0.1); &:hover { background-color:var(--tp-theme-1); } } } & .tp-team-author-info { & span { &::before{ display: none; } } } } .tp-team-style-3 { & .tp-team-item { @media #{$lg,$md,$xs}{ flex-wrap: wrap; } } & .tp-team-title-box { @media #{$xs}{ margin-bottom: 30px; } } & .tp-team-big-text { position: absolute; content: ''; top: 86%; right: -7.4%; @media #{$xxl}{ right:-3.4%; } @media #{$xl}{ right: -7.4%; } & h6 { color: var(--tp-theme-1); font-size: 148px; font-style: normal; font-weight: 700; opacity: 0.05; text-transform: capitalize; @media #{$xxl,$xl}{ font-size: 130px; } } } & .tp-team-thumb { position: relative; height: 100%; flex: 0 0 auto; @media #{$xs}{ width: 100%; } & img{ height: 100%; width: 100%; object-fit: cover; @media #{$xs}{ width: 100%; } } @media #{$lg,$md,$xs}{ margin-right: 0; margin-bottom: 20px; } } & .tp-team-author-info { padding: 40px; padding-bottom: 60px; @media #{$lg,$md,$xs}{ padding-left: 30px; padding-bottom: 30px; padding-top: 0; } @media #{$sm}{ padding: 40px; } & span { &::before{ display: none; } } } & .tp-team-social-box { & a { height: 30px; width: 30px; line-height: 30px; text-align: center; display: inline-block; color: var(--tp-theme-1); background-color: #F8F8F8; transition: .3s; &:not(:last-child){ margin-right: 7px; } &:hover { background-color: var(--tp-theme-1); color: var(--tp-common-white); } } } } .tp-team-style-4 { & .tp-team-item { box-shadow: 0px 6px 25px 0px rgba(0, 0, 0, 0.05); } & .tp-team-active { margin: -30px; padding: 30px; } & .tp-team-author-info { padding: 30px 30px; padding-top: 25px; } } .tp-team-inner-style { & .tp-team-item { background-color: #F8F8F8; height: 100%; } & .tp-team-author-info{ padding: 40px; } & .tp-team-social-box { & a { width: auto; background-color: transparent; color: var(--tp-common-black); &:not(:last-child){ margin-right: 20px; } &:hover { color: var(--tp-theme-1); background-color: transparent; } } } & .tp-team-author-info { & span { &::before{ background-color: var(--tp-common-black); } } } } .tp-team-details{ &-inner-style { & .tp-section-title { @media #{$lg}{ font-size: 39px; } @media #{$md}{ font-size: 35px; padding-bottom: 30px; } @media #{$xs}{ font-size: 26px; padding-bottom: 30px; } } } &-title { font-size: 48px; @media #{$xl}{ font-size: 33px; } @media #{$lg}{ font-size: 27px; } @media #{$md}{ font-size: 25px; } @media #{$xs}{ font-size: 22px; } } &-wrap { margin-left: 5px; @media #{$lg,$md,$xs}{ margin-left: 0; } & .tp-team-author-info { & span { &::before{ width: 70px; background-color: var(--tp-common-black); } } } } &-text { & p { @media #{$xl}{ & br { display: none; } } @media #{$lg,$md,$xs}{ font-size: 14px; & br { display: none; } } } } &-social { padding-left: 104px; @media #{$xs}{ margin-top: 30px; padding-left: 0; } @media #{$sm}{ padding-left: 60px; } & span { display: inline-block; margin-right: 22px; } & a { display: inline-block; color: var(--tp-theme-1); transition: .3s; &:hover { color: var(--tp-common-black); } &:not(:last-child){ margin-right: 10px; } } } &-thumb { @media #{$md,$xs}{ margin-bottom: 30px; } & img { width: 100%; } } }