관리-도구
편집 파일: _about.scss
@use '../../utils' as *; /*----------------------------------------*/ /* 7.1 about css start /*----------------------------------------*/ .tp-about { &-bg { position: relative; z-index: 2; &::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 13.5%; background-color: var(--tp-common-white); z-index: -1; @media #{$lg}{ height: 7.5%; } @media #{$md,$xs}{ height: 100%; } } } &-list { & ul { & li { font-size: 20px; font-style: normal; font-weight: 600; padding-left: 30px; position: relative; color: var(--tp-common-black); list-style-type: none; margin-bottom: 15px; @media #{$xl}{ font-size: 17px; } @media #{$lg}{ font-size: 15px; margin-bottom: 6px; } @media #{$md,$xs}{ font-size: 17px; } & i { position: absolute; left: 0; top: 8px; font-size: 16px; color: var(--tp-theme-1); } } } } &-big-text { position: absolute; content: ''; top: 0; right: 20.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; } } } &-text { & p { @media #{$xl,$lg,$md,$xs}{ font-size: 14px; } } } &-thumb-box { margin-right: 35px; width: 100%; @media #{$md,$xs}{ margin-top: 50px; margin-right: 0; } } &-thumb { & img { width: 100%; } } } .tp-about-2{ &-right { padding-top: 45px; padding-bottom: 20px; margin-left: 9px; @media #{$lg,$md,$xs}{ margin-left: 0; padding-top: 0; padding-bottom: 0; } } &-thumb { position: absolute; top: 0; left: 0; height: 100%; width: 46.2%; background-repeat: no-repeat; background-size: cover; background-position: center; @media #{$md,$xs}{ position: static; margin-top: 50px; height: 100%; width: 100%; } } &-icon { & span { position: relative; display: inline-block; & svg { color: var(--tp-theme-1); @media #{$lg}{ width: 45px; } } &::after{ position: absolute; content: ''; top: 0; left: -10px; height: 65px; width: 65px; border-radius: 50%; background-color: #F8F8F8; z-index: -1; @media #{$lg}{ height: 35px; width: 35px; } } } } &-text { & p { @media #{$lg}{ font-size: 13px; & br { display: none; } } @media #{$md,$xs}{ font-size: 14px; & br { display: none; } } } } &-title { font-size: 24px; font-weight: 600; margin-left: 20px; @media #{$lg}{ font-size: 22px; } @media #{$md,$xs}{ font-size: 20px; } } &-shape{ &-1{ position: absolute; bottom:-45px; right: -35px; z-index: -1; } &-2{ position: absolute; top: 40px; right: -12px; animation: tptranslateY2 2.5s infinite alternate; } } } .tp-about-3 { &-title-box { padding-left: 250px; @media #{$lg,$md}{ padding-left: 150px; } @media #{$xs}{ padding-left: 0px; } } &-content{ margin-top: 62px; padding-left: 180px; position: relative; @media #{$lg}{ padding-left: 60px; } @media #{$md,$xs}{ padding-left: 0px; } &::before{ position: absolute; top: 9px; left: 0; content: ''; width: 153px; height: 1px; background-color: var(--tp-theme-1); @media #{$lg}{ width: 50px; } @media #{$md,$xs}{ display: none; } } & p { color: var(--tp-common-black); @media #{$md,$xs}{ font-size: 14px; } } } &-thumb { overflow: hidden; position: relative; & img { width: 100%; transition: 1.3s all ease; } } &-thumb-sm { overflow: hidden; margin-right: 53px; position: relative; @media #{$md,$xs}{ margin-right: 0; } & img { width: 100%; transition: 1.3s all ease; } } &-big-text { position: absolute; content: ''; bottom: -21%; left: -80px; & h6 { color: var(--tp-theme-1); font-size: 118px; font-style: normal; font-weight: 700; opacity: 0.05; @media #{$xl}{ font-size: 110px; } } } } .tp-about-4{ &-left { margin-right:36px; @media #{$md,$xs}{ margin-bottom: 50px; margin-right: 0; } } &-text { margin-bottom: 25px; & p { @media #{$lg,$md,$xs}{ font-size: 14px; } } } &-thumb-1 { overflow: hidden; position: relative; @media #{$md}{ transform: translateX(70px); } @media #{$xs}{ transform: scale(.9); } } &-thumb-2 { margin-top: 90px; overflow: hidden; position: relative; @media #{$xl,$lg}{ transform: translateX(20px); } @media #{$md}{ transform: translateX(-70px); } @media #{$xs}{ transform: scale(.9); } } &-circle { position: absolute; left: 73px; top: 20px; z-index: -1; @media #{$lg}{ left: 5%; } @media #{$md}{ left: 15%; } @media #{$xs}{ left: -29%; transform: scale(0.45); top: -27%; } @media #{$sm}{ display: none; } @media only screen and (min-width: 440px) and (max-width: 575px){ left: -13%; transform: scale(0.6); top: -16%; } & span { height: 477px; width: 477px; border-radius: 50%; display: inline-block; border: 3px dashed var(--tp-theme-1); z-index: -1; animation: rotate2 25s linear infinite; @media #{$lg}{ height: 377px; width: 377px; } } } &-list { margin-bottom: 50px; @media #{$xs}{ margin-bottom: 20px; } & ul { & li { font-size: 16px; font-weight: 400; line-height: 26px; margin-bottom: 17px; position: relative; list-style-type: none; padding-left: 30px; color: var(--tp-common-black); @media #{$lg,$md,$xs}{ font-size: 14px; margin-bottom: 10px; } &:last-child{ margin-bottom: 0px; } & i { color: var(--tp-theme-1); position: absolute; top: 5px; left: 0; } } } } } .tp-about-5-style { & .tp-about-list { & ul { & li { padding-left: 37px; font-size: 19px; @media #{$xl}{ font-size: 17px; } @media #{$lg}{ font-size: 18px; margin-bottom: 15px; } @media #{$md,$xs}{ font-size: 16px; margin-bottom: 7px; } & i { font-size: 24px; transform: translateY(-5px); } } } } & .tp-about-content { @media #{$xs}{ margin-bottom:50px; } } } .tp-about-5 { &-thumb-box { padding-bottom: 120px; padding-left: 50px; @media #{$lg}{ padding-left: 0; transform: scale(.9); } @media #{$md}{ padding-left: 0; } @media #{$xs}{ padding-left: 0; padding-bottom: 0px; } } &-thumb { overflow: hidden; @media #{$md}{ transform: scale(.7) translateX(-10px); margin-left: -30px; } @media #{$xs}{ margin-bottom: 20px; } & img { @media #{$xs}{ width: 100%; } } &::after{ background: rgba(255, 255, 255, 0.3); content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0; opacity: 1; pointer-events: none; } &:hover { &::after{ height: 100%; opacity: 0; -webkit-transition: all 400ms linear; transition: all 400ms linear; } } } &-thumb-sm { position: absolute; right: 0; bottom: 0; border: 7px solid var(--tp-common-white); overflow: hidden; @media #{$lg}{ right: -6%; } @media #{$md}{ transform: scale(.8); right: -7%; } @media #{$xs}{ position: static; border: none; } & img { @media #{$xs}{ width: 100%; } } &::after{ background: rgba(255, 255, 255, 0.3); content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0; opacity: 1; pointer-events: none; } &:hover { &::after{ height: 100%; opacity: 0; -webkit-transition: all 400ms linear; transition: all 400ms linear; } } } &-shape-1 { position: absolute; top: 9%; left: -25px; animation: tptranslateY2 2.5s infinite alternate; @media #{$md}{ transform: scale(.7); left: -20px; } @media #{$xs}{ display: none; } } &-big-text { position: absolute; content: ""; top: 59%; left: 39%; @media #{$xxl}{ left: 35%; } @media #{$xl}{ left: 30%; } & h6 { color: var(--tp-theme-1); font-size: 118px; font-style: normal; font-weight: 700; opacity: 0.05; text-transform: capitalize; } } } .tp-hover-distort{ &-wrapper{ position: relative; .canvas{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } } &-img{ opacity: 0; object-fit: cover; @media #{$md}{ width: 100%; } &.back{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } }