관리-도구
편집 파일: _service.scss
@use '../../utils' as *; /*----------------------------------------*/ /* 7.16 service css start /*----------------------------------------*/ .tp-service { &-item { &:hover { & .tp-service-thumb { & img { transform: scale(1.2); } &::after{ left: 0; right: 0; opacity: 0; } } & .tp-service-icon { & span { transform: scaleX(-1); -webkit-transform: scaleX(-1); color: var(--tp-common-black); } } & .tp-service-icon-box { & span { & svg { transform: scaleX(-1); -webkit-transform: scaleX(-1); color: var(--tp-common-black); } } } } } &-thumb { overflow: hidden; & img { width: 100%; transition: 1.3s all ease; } &::after{ background: rgba(255, 255, 255, 0.3); bottom: 0; content: ""; left: 50%; position: absolute; right: 51%; top: 0; opacity: 1; pointer-events: none; -webkit-transition: all 500ms ease; transition: all 500ms ease; } } &-icon { position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); & span { width: 100px; height: 103px; line-height: 103px; display: inline-block; text-align: center; background-color: var(--tp-common-white); -webkit-transition: all 500ms ease; transition: all 500ms ease; color: var(--tp-theme-1); } &-box { & span { display: inline-block; & svg { width: 65px; height: 66px; color: var(--tp-theme-1); -webkit-transition: all 500ms ease; transition: all 500ms ease; } } } } &-title { font-size: 20px; font-weight: 600; margin-bottom: 20px; & 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; } } } &-content { padding:40px 40px; padding-bottom: 25px; background-color: var(--tp-common-white); box-shadow: 0px 6px 25px 0px rgba(0, 0, 0, 0.05); @media #{$lg,$md,$xs}{ padding: 35px 20px; } & p { margin-bottom: 10px; @media #{$lg,$md,$xs}{ font-size: 14px; } } } &-link { & a { color: var(--tp-common-black); font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: capitalize; } } } .tp-service-style-2 { & .tp-service-content{ padding: 50px 20px; padding-bottom: 45px; } } .tp-service-2 { &-item { &:hover { & .tp-service-2-icon { & span { transform: scaleX(-1); -webkit-transform: scaleX(-1); color: var(--tp-common-black); } } } } &-icon { color: var(--tp-theme-1); padding-bottom: 30px; & span { display: inline-block; -webkit-transition: all 500ms ease; transition: all 500ms ease; width: 65px; height: 66px; text-align: center; } } &-title { font-size: 24px; font-style: normal; font-weight: 600; padding-bottom: 10px; @media #{$xl}{ font-size: 21px; } @media #{$lg}{ font-size: 20px; } @media #{$md,$xs}{ font-size: 22px; } -webkit-transition: all 500ms ease; transition: all 500ms ease; & 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; } } } &-text { & p { margin-bottom: 11px; @media #{$xl}{ font-size: 14px; } @media #{$lg}{ font-size: 13px; } @media #{$md,$xs}{ font-size: 14px; } -webkit-transition: all 500ms ease; transition: all 500ms ease; } & a { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: capitalize; color: var(--tp-common-black); position: relative; -webkit-transition: all 500ms ease; transition: all 500ms ease; &:hover { color: var(--tp-theme-1); } } } &-top-text { & p { margin-bottom: 0; padding-left: 80px; @media #{$lg,$md,$xs}{ padding-left: 0; font-size: 14px; } } } } .tp-service-style-3 { & .tp-service-2-item { padding: 40px 35px; background-color: #F8F8F8; @media #{$xs}{ padding: 40px 25px; } } & .tp-service-2-text { & p { @media #{$xs}{ font-size: 13px; } } } & .tp-service-2-icon { margin-right: 20px; } & .tp-service-2-title { line-height: 1.2; @media #{$sm}{ br { display: none; } } } } .tp-service-style-4 { & .tp-service-2-item { padding: 40px 38px; position: relative; @media #{$lg}{ flex-wrap: wrap; } @media #{$md}{ padding: 40px 25px; } @media #{$xs}{ flex-wrap: wrap; } @media #{$sm}{ padding: 40px 28px; } &::after{ content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top; transform-origin: top; -webkit-transition: all 500ms ease; transition: all 500ms ease; visibility: hidden; background-size: cover; background-color: var(--tp-common-black); } &.active { &::after{ opacity: 1; visibility: visible; -webkit-transform: scaleY(1); transform: scaleY(1); } & .tp-service-2-icon { & span { color: var(--tp-common-white); } } & .tp-service-2-title{ color: var(--tp-common-white); } & .tp-service-2-text{ & p { color: var(--tp-common-white); } & a { color: var(--tp-common-white); } } } } & .tp-service-2-icon { margin-right: 30px; padding-bottom: 0; position: relative; z-index: 1; @media #{$lg,$xs}{ padding-bottom: 30px; } } & .tp-service-2-content { position: relative; z-index: 1; } } .tp-service-style-5 { & .tp-service-2-item { border: 1px solid #E6E6E6; background-color: transparent; -webkit-transition: all 500ms ease; transition: all 500ms ease; position: relative; @media #{$lg}{ padding: 40px 26px; } &.active { &::after{ opacity: 1; visibility: visible; -webkit-transform: scaleY(1); transform: scaleY(1); } & .tp-service-2-title{ color: var(--tp-common-white); } & .tp-service-2-content{ & p { color: var(--tp-common-white); } } & .tp-btn-border-lg { color: var(--tp-common-white); } & .tp-service-2-icon { & span { color: var(--tp-common-white); } } } &::after{ content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top; transform-origin: top; -webkit-transition: all 500ms ease; transition: all 500ms ease; visibility: hidden; background-size: cover; background-color: var(--tp-common-black); z-index: -1; } } & .tp-service-2-icon { margin-right: 30px; } & .tp-service-2-title-box { @media #{$xs}{ margin-bottom:30px; } } & .tp-service-2-title { & a { background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); } } & .tp-service-2-big-text { position: absolute; content: ""; top: 30%; right: 18%; @media #{$xxl}{ top: 31%; right: 7%; } & h6 { color: var(--tp-theme-1); font-size: 118px; font-style: normal; font-weight: 700; opacity: 0.05; text-transform: capitalize; @media #{$xxl}{ font-size: 100px; } @media #{$xl}{ left: 30%; } } } } .tp-link{ position: relative; display: inline-block; & .bottom-line { overflow: hidden; left: 0; bottom: 4px; height: 1px; width: 100%; position: absolute; background:var(--tp-theme-1); display: block; position: relative; &::after{ content: ''; position: absolute; left: 10px; top: 0; width: 5px; height: 1px; background-color: #fff; animation: lineAnim 1.5s linear infinite; } } } /*---details css start here---*/ .tp-sv-sidebar{ &-widget { & ul { & li { list-style-type: none; &:not(:last-child){ margin-bottom: 20px; } & a { padding-right: 6px; display:block; color: var(--tp-theme-1); padding: 16px 20px; border: 1px solid var(--tp-grey-1); transition: .3s; } &:hover { & a { background-color:#F8F8F8; border-color: transparent; } } &.active { & a { background-color:#F8F8F8; border-color: transparent; } } } } } &-author-info { padding:30px 30px; padding-bottom: 20px; border-radius: 5px; box-shadow: 0px 4.4px 20px -1px rgba(19, 16, 34, 0.05); & h5 { font-size: 20px; margin-bottom: 3px; @media #{$xs}{ font-size: 17px; } } & p { @media #{$lg,$md,$xs}{ font-size: 14px; } } } } .tp-sv-details{ &-text { @media #{$xs}{ flex-wrap: wrap; } @media #{$sm}{ flex-wrap: nowrap; } & p { padding-right: 10px; @media #{$lg,$md,$xs}{ padding-right: 0; font-size: 14px; } } & span { height: 60px; width: 60px; line-height: 60px; border-radius: 5px; display: inline-block; text-align: center; flex: 0 0 auto; margin-right: 45px; background-color: var(--tp-theme-1); color: var(--tp-common-white); @media #{$xs}{ margin-bottom: 30px; } @media #{$sm}{ margin-bottom: 0; } } } &-left { &-wrap { @media #{$xs}{ margin-bottom: 30px; } } & h6 { position: relative; padding-left: 30px; font-size: 20px; color: var(--tp-text-body); @media #{$xs}{ font-size: 16px; } & i { position: absolute; top: 3px; left: 0; font-size: 18px; color: var(--tp-theme-1); } } & p { @media #{$lg,$md,$xs}{ font-size: 14px; & br { display: none; } } } } &-left-box { & h6 { font-size: 20px; } & p { margin-right: -35px; @media #{$xl}{ margin-right: 0px; } @media #{$lg,$md,$xs}{ margin-right: 0px; font-size: 14px; } } } &-thumb { & img { @media #{$xs}{ width: 100%; } } } }