관리-도구
편집 파일: _newsletter.scss
@use '../../utils' as *; /*----------------------------------------*/ /* 7.11 newsletter css /*----------------------------------------*/ .tp-newsletter{ &-bg { position: relative; &::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 43%; background-color: var(--tp-common-black); } } &-height { padding: 60px 70px; padding-right: 135px; @media #{$xl}{ padding: 60px 60px; } @media #{$lg,$md}{ padding: 60px 50px; } @media #{$xs}{ padding: 60px 20px; } } &-title { font-size: 48px; font-weight: 700; margin-bottom: 17px; color: var(--tp-common-white); text-transform: capitalize; @media #{$xxl}{ font-size: 45px; } @media #{$xl}{ font-size: 42px; } @media #{$lg}{ font-size: 34px; } @media #{$md}{ font-size: 38px; & br { display: none; } } @media #{$xs}{ font-size: 27px; & br { display: none; } } } &-content { @media #{$md,$xs}{ margin-bottom: 40px; } & p { font-size: 16px; font-weight: 400; line-height: 26px; margin-bottom: 0; color: var(--tp-common-white); @media #{$xl,$md}{ & br { display: none; } } @media #{$xs}{ font-size: 14px; & br { display: none; } } } } &-input-box{ @media #{$xs}{ margin-bottom: 10px; } @media #{$sm}{ margin-bottom: 0px; } @media only screen and (min-width: 440px) and (max-width: 575px){ width: 100%; } & input { width: 469px; padding-right: 60px; color: var(--tp-common-black); background-color: var(--tp-common-white); @media #{$xl}{ width: 100%; } @media #{$lg,$md,$xs}{ height: 50px; line-height: 50px; width: 100%; } @media only screen and (min-width: 440px) and (max-width: 575px){ width: 100%; } @include placeholder{ color: #54595F; } } } &-input-icon { position: absolute; top: 50%; right: 30px; transform: translateY(-50%); & span { color:#54595F; } } &-input-wrap { margin-left: -40px; @media #{$md}{ margin-left: 0; } @media #{$xs}{ margin-left: 0; flex-wrap: wrap; } } &-wrap { & .tp-btn-black{ margin-left: 10px; height: 65px; line-height: 65px; padding: 0 40px; @media #{$lg,$md}{ height: 50px; line-height: 50px; padding: 0 20px; } @media #{$xs}{ height: 50px; line-height: 50px; padding: 0 20px; margin-left: 0; } } } &-shape-1 { position: absolute; top: 18%; left: 4%; opacity: 0.4; @media #{$xxxl}{ left: 2%; } @media #{$xxl}{ left: 0%; top: 50%; transform: scale(.6); } @media #{$xl,$lg,$md,$xs}{ display: none; } } }