관리-도구
편집 파일: _funfact.scss
@use '../../utils' as *; /*----------------------------------------*/ /* 7.8 funfact css start /*----------------------------------------*/ .tp-funfact { &-height { padding: 145px 0; position: relative; z-index: 1; @media #{$xxxl}{ padding: 115px 0; } @media #{$xxl}{ padding: 115px 0; } @media #{$xl}{ padding: 85px 0; } @media #{$lg,$md,$xs}{ padding: 85px 0; } } &-bg { position: absolute; bottom: 0; right: 0; z-index: -1; height: 100%; width: 100%; @media #{$xxl}{ display: none; } & img { mix-blend-mode: luminosity; opacity: .14; } } &-item-box { margin-top: 15px; margin-right: 35px; @media #{$xs}{ flex-wrap: wrap; margin-right: 0; } @media #{$sm}{ margin-right: 35px; } } &-item { padding: 50px 34px; padding-bottom: 44px; text-align: center; width: auto; border-bottom: 5px solid var(--tp-theme-1); border-right: 5px solid var(--tp-theme-1); background-color:var(--tp-common-black-2); @media #{$xl,$lg,$md}{ padding: 30px 34px; padding-bottom: 30px; } @media #{$xs}{ padding: 30px 34px; padding-bottom: 30px; text-align: center; margin: 0 30px; margin-bottom: 70px; } & span { color: var(--tp-common-white); font-size: 16px; font-weight: 400; line-height: 26px; @media #{$xl,$lg,$md,$xs}{ font-size: 14px; } } } &-number { color: var(--tp-common-white); font-size: 48px; font-weight: 700; margin-bottom: 0; @media #{$xl,$lg,$md,$xs}{ font-size: 32px; } & i { font-style: normal; } } &-icon { position: absolute; top: -27px; right: -27px; & span { height: 54px; width: 54px; line-height: 54px; text-align: center; border-radius: 50%; display: inline-block; background-color: var(--tp-theme-1); & svg { color: var(--tp-common-white); } } } &-shape-1 { position: absolute; bottom: 0; right: 0; } &-title-box { margin-top: 15px; @media #{$md,$xs}{ margin-top: 0; margin-bottom: 50px; } } } .tp-funfact-2 { &-item-box { @media #{$xs}{ margin-bottom: 50px; } & ul { & li { list-style-type: none; padding-bottom: 20px; margin-bottom: 58px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); @media #{$lg}{ padding-bottom: 20px; margin-bottom: 25px; } @media #{$md,$xs}{ padding-bottom: 20px; margin-bottom: 20px; } &:last-child{ margin-bottom: 0; } } } } &-item { & span { font-size: 16px; font-weight: 400; line-height: 26px; @media #{$lg}{ font-size: 14px; } @media #{$md,$xs}{ font-size: 14px;; & br { display: none; } } } } &-title { font-size: 68px; font-weight: 700; margin-bottom: 0; line-height: 1; @media #{$xxxl}{ font-size: 56px; } @media #{$xxl}{ font-size: 50px; } @media #{$xl}{ font-size: 48px; } @media #{$lg}{ font-size: 44px; } @media #{$md,$xs}{ font-size: 38px; } & i { font-style: normal; } } &-thumb { display: block; overflow: hidden; margin-left: 35px; position: relative; @media #{$lg,$md,$xs}{ margin-left: 0; } & img { width: 100%; transform: scale(1.04) translateX(-1%); transition: transform .6s cubic-bezier(.65,0,.35,1); } &::after { position: absolute; top: 0; left: -80%; z-index: 2; display: block; content: ""; width: 50%; height: 100%; background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.3))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); z-index: 1; } &:hover { & img { transform: scale(1.04) translateX(1%); } &::after{ -webkit-animation: shine 1s; animation: shine 1s; } } } } .tp-funfact-style-2 { &.tp-funfact-height { padding: 105px 0; } & .tp-funfact-wrap { margin-left: 5px; @media #{$lg,$md}{ margin-left: 0; } @media #{$xs}{ flex-wrap: wrap; margin-top: 40px; text-align: start; margin-left: 0; } } & .tp-funfact-item { @media #{$xs}{ margin: 0; margin-bottom: 25px; } } & .tp-funfact-title-box { @media #{$md,$xs}{ margin-bottom: 0; } } & .tp-section-title { position: relative; padding-left: 25px; @media #{$md}{ padding-left: 0; margin-bottom: 0; } @media #{$xs}{ padding-left: 0; } &::after{ position: absolute; content: ''; top: 50%; left: 0; height: 112px; width: 1px; transform: translateY(-50%); background-color: var(--tp-common-white); @media #{$md,$xs}{ display: none; } } } & .tp-funfact-item { padding: 0; text-align: start; background-color: transparent; } } .tp-funfact-style-3 { & .tp-funfact-2-title { width: 200px; color: transparent; font-family: var(--tp-ff-poppins); -webkit-text-stroke: 1px var(--tp-common-black); font-weight: 700; @media #{$xs}{ width: 100%; font-size: 42px; } @media #{$sm}{ width: 100%; font-size: 60px; } } @media #{$xs}{ width: 100%; margin-bottom: 30px; } @media #{$sm}{ width: 100%; margin-bottom: 50px; } & .tp-funfact-2-item-box { @media #{$xs}{ flex-wrap: wrap; } } & .tp-funfact-2-item { @media #{$xs}{ margin-bottom: 50px; } } } .tp-funfact-style-4 { & .tp-funfact-2-big-text { position: absolute; content: ""; top: 50%; left: 50%; transform: translate(-50%,-50%); & h6 { color: var(--tp-theme-1); font-size: 118px; font-style: normal; font-weight: 700; opacity: 0.05; text-transform: capitalize; } } & .tp-funfact-2-item-box { @media #{$xs}{ flex-wrap: wrap; } } & .tp-funfact-2-item { @media #{$xs}{ text-align: center; margin-bottom: 55px; width: 100%; } & span { @media #{$md}{ & br { display: block; } } } & h5 { font-size: 48px; @media #{$md,$xs}{ font-size: 36px; } } } }