관리-도구
편집 파일: _blog.scss
@use '../../utils' as *; /*----------------------------------------*/ /* 5.1 blog css /*----------------------------------------*/ .tp-blog{ &-item { height: 100%; line-height: 0; background-color: var(--tp-common-white); @media #{$lg,$xs}{ flex-wrap: wrap; } &:hover { & .tp-blog-thumb { & img { transform: scale(1.2) rotate(-2deg); } &::after{ left: 0; right: 0; opacity: 0; -webkit-transition: all 400ms linear; transition: all 400ms linear; } } } } &-thumb { overflow: hidden; position: relative; height: 100%; flex: 0 0 auto; @media #{$lg,$xs}{ width: 100%; } & img { transition: 1.3s all ease; height: 100%; width: 100%; object-fit: cover; @media #{$lg,$xs}{ width: 100%; } } &::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 400ms linear; transition: all 400ms linear; } } &-meta { & span { font-size: 12px; font-weight: 500; letter-spacing: 1.2px; color: var(--tp-common-black); @media #{$xl,$md}{ font-size: 10px; } @media #{$xs}{ font-size: 9px; } @media #{$sm}{ font-size: 12px; } &:not(:last-child){ margin-right: 30px; @media #{$xl,$lg,$md,$xs}{ margin-right: 20px; } } & svg { display: inline-block; margin-right: 5px; transform: translateY(-3px); } } } &-title { margin-right: 50px; font-size: 28px; font-style: normal; font-weight: 700; line-height: 1.4; @media #{$xxl}{ font-size: 25px; } @media #{$xl}{ font-size: 21px; } @media #{$lg}{ font-size: 22px; & br { display: none; } } @media #{$md}{ font-size: 25px; & br { display: none; } } @media #{$xs}{ font-size: 19px; margin-right: 0px; & br { display: none; } } @media only screen and (min-width:440px) and (max-width: 575px) { font-size: 22px; } & 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: 27px; @media #{$lg}{ padding: 27px; padding-bottom: 40px; } } &-big-text { position: absolute; content: ""; top: 25%; right: 10.6%; @media #{$xxl}{ right: 9.6%; } @media #{$xl}{ right: 7.6%; } & h6 { color: var(--tp-theme-1); font-size: 148px; font-style: normal; font-weight: 700; opacity: 0.05; @media #{$xl}{ font-size: 130px; } } } &-big-text-2 { position: absolute; content: ""; bottom: 5%; left: 8.6%; @media #{$xxxl}{ left: 3%; } @media #{$xxl}{ left: 1%; bottom: 3%; } @media #{$xl}{ left: 1%; } & h6 { color: var(--tp-theme-1); font-size: 148px; font-style: normal; font-weight: 700; opacity: 0.05; @media #{$xl}{ font-size: 130px; } } } &-big-text-3 { position: absolute; content: ""; top: 3%; left: 5.6%; @media #{$xxxl}{ left: 2%; } @media #{$xxl}{ left: .5%; } & h6 { color: var(--tp-theme-1); font-size: 118px; font-style: normal; font-weight: 700; opacity: 0.05; } } &-arrow-box { position: absolute; top: -27%; right: 0; z-index: 9; @media #{$lg}{ top: -9%; } & button { color: var(--tp-common-black); &.blog-prev { margin-right: 75px; position:relative; &::after{ position: absolute; content: ""; top: 50%; right: -20px; height: 40px; width: 40px; border-radius: 50%; border: 1px solid var(--tp-common-black); transform: translateY(-50%); } } &.blog-next { position:relative; &::after{ position: absolute; content: ""; top: 50%; left: -20px; height: 40px; width: 40px; border-radius: 50%; border: 1px solid var(--tp-common-black); transform: translateY(-50%); } } } } } .tp-blog-2 { &-item { padding: 20px 0; border-top: 1px solid rgba(166, 161, 130, 0.4); &.item-border { border-bottom: 1px solid rgba(166, 161, 130, 0.4); } &:hover { & .tp-blog-2-thumb { & img { transform: scale(1.2) rotate(-2deg); } &::after{ left: 0; right: 0; opacity: 0; -webkit-transition: all 400ms linear; transition: all 400ms linear; } } } } &-title-box { @media #{$md,$xs}{ margin-bottom: 30px; } } &-title { font-size: 28px; font-weight: 700; margin-bottom: 0; line-height: 1.3; @media #{$xl}{ font-size: 22px; & br { display: none; } } @media #{$lg}{ font-size: 18px; & br { display: none; } } @media #{$md}{ font-size: 27px; } @media #{$xs}{ font-size: 22px; & br { display: none; } } & 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; } } } &-middle-box{ margin-left: -40px; padding-right: 10px; @media #{$xl}{ margin-left: 30px; margin-right: -30px; } @media #{$lg}{ margin-left: 0; padding-right: 0; margin-right: 0; text-align: center; } @media #{$md}{ margin-left: 0; padding-right: 0px; margin-right: 0px; margin-bottom: 30px; } @media #{$xs}{ margin-left: 0; padding-right: 0px; margin-right: 0px; margin-bottom: 30px; flex-wrap: wrap; } & .tp-blog-meta { @media #{$xs}{ margin-bottom: 30px; } & span { display: block; @media #{$xl}{ display: inline-block; font-size: 13px; } @media #{$lg}{ display: inline-block; margin-right: 5px; } @media #{$md}{ font-size: 14px; } @media #{$xs}{ font-size: 12px; } &:not(:last-child){ margin-bottom: 20px; @media #{$xl}{ margin-bottom: 8px; } @media #{$lg,$xs}{ margin-bottom: 0px; } } } } } &-top-text { & p { @media #{$xl,$lg,$md,$xs}{ font-size: 14px; } } } &-thumb { overflow: hidden; position: relative; @media #{$md,$xs}{ } & a { display: inline-block; } & img { transition: .7s 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 400ms linear; transition: all 400ms linear; } } } .tp-blog-style-2 { & .tp-blog-item { flex-wrap: wrap; background-color: transparent; overflow: hidden; } & .tp-blog-content { padding: 22px 0; background-color: transparent; } & .tp-blog-title { margin-right: 0; @media #{$lg}{ font-size: 20px; } @media #{$xs}{ font-size: 21px; } } & .tp-btn-border-lg { &.grey-border-2{ &:hover { background-color: var(--tp-common-black); & span { color: var(--tp-common-white); } } } } & .tp-blog-meta { & span { position: relative; padding-left: 110px; @media #{$lg,$sm}{ padding-left: 90px; } &::after{ position: absolute; content: ''; top: 5px; left: 0; width: 96px; height: 1px; background-color: var(--tp-theme-1); @media #{$lg,$sm}{ width: 65px; } } } } } .tp-blog-style-3 { & .tp-blog-meta { & span { padding-left: 0; display: inline-block; @media #{$lg,$md,$xs}{ font-size: 11px; } &::after{ display: none; } } } & .tp-blog-item { &:hover { & .tp-blog-thumb{ & img { transform: scale(1.04) translateX(1.5%); } } } } & .tp-blog-thumb { flex: auto; margin-right: 0; & img { transform: scale(1.04) translateX(-1.5%); transition: transform .6s cubic-bezier(.65,0,.35,1); } } & .tp-blog-title { font-size: 28px; @media #{$xxl}{ font-size: 26px; } @media #{$xl}{ font-size: 25px; } @media #{$lg}{ font-size: 20px; } @media #{$md}{ font-size: 22px; } @media #{$xs}{ font-size: 21px; } @media #{$sm}{ font-size: 24px; } } & .tp-blog-link { & a { color: var(--tp-common-black); font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: capitalize; display: inline-block; line-height: 28px; } } }