.starify-card-list-1 { width: 100%; padding: 4rem 0; .card-list { width: 100%; display: flex; flex-wrap: wrap; grid-gap: 1.6rem; .card-item { flex: 1; border-radius: .6rem; background-color: #fff; box-shadow: 0 .6rem 1.6rem 0 rgba(0, 0, 0, 0.1); padding: 2.4rem 3.6rem 4rem; .item-title { font-size: 3.6rem; font-weight: 700; line-height: 1.2; color: #2f6dfd; margin: 0 0 2rem; } .item-desc { font-size: 2rem; line-height: 1.3; font-weight: 600; color: #000; } } } @media (max-width: 992px) { padding: 2.4rem 1.5rem; .card-list { grid-gap: 1.2rem; flex-direction: column; .card-item { padding: 2rem 1.6rem 2.4rem; .item-title { font-size: 3.0rem; margin: 0 0 1.6rem; } .item-desc { font-size: 1.6rem; } } } } }  .starify-comp-1{ width: 100%; display: grid; grid-template-columns: 3fr 2fr; background: #0D122C; border-radius: 1.2em; overflow: hidden; .starify-text{ width: 100%; padding: 1em; color: white; box-sizing: border-box; } .starify-image{ width: 100%; aspect-ratio: 1; img{ width: 100%; height: 100%; } } }  .starify-comp-2 { padding: 2em; width: 100%; border-radius: 2.4em; background-color: #0066FF; display: flex; flex-direction: column; align-items: center; justify-content: center; .starify-text { color: white; margin-bottom: 2em; box-sizing: border-box; } .starify-button { font-weight: bold; background-color: white; color: #0066FF; padding: 0.6em 1.6em; border-radius: 8em; width: fit-content; } }  .starify-comp-3{ width: 100%; display: grid; display: grid; grid-template-columns: 2fr 3fr; background: #0D122C; border-radius: 1.2em; overflow: hidden; .starify-image{ width: 100%; height: 100%; img{ width: 100%; height: 100%; display: block; object-fit: cover; } } .starify-text{ padding: 1em; .starify-title{ color: white; font-weight: bold; margin-bottom: 1em; box-sizing: border-box; } .starify-desc{ color: white; margin-bottom: 2em; box-sizing: border-box; } .starify-button{ width: fit-content; border-radius:8em; background-color: #0066FF; color: white; font-weight: bold; padding: 0.6em 1.6em; box-sizing: border-box; } } }  .starify-comp-6 { z-index: 10; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: auto; width: 100%; max-width: 40rem; background-color: white; border-radius: 1rem; overflow: hidden; position: fixed; transition-duration: 300ms; box-shadow: 0 0 1rem #00000044; .starify-image { width: 100%; aspect-ratio: 3; position: relative; img { width: 100%; height: 100%; } .starify-title { position: absolute; left: 2rem; bottom: 0; } } .starify-close { cursor: pointer; position: absolute; right: 1.5rem; top: 1.5rem; font-size: 2rem; input { display: none; } } .starify-comp-box { padding: 0 2rem 2rem; .starify-text { margin-top: 2rem; line-height: 1.4; } } &.white { .starify-close { color: white; } .starify-title { color: white; } } &.black { .starify-close { color: black; } .starify-title { color: black; } } &:has(input:checked) { transform: translate(-50%, 0); opacity: 0; pointer-events: none; } }  .starify-form-1 { width: 100%; .content-box { width: 100%; padding: 2.4rem 2.4rem 3.2rem; background-color: #6c57f4; border-radius: 2rem; .form-head { width: 100%; display: flex; justify-content: center; margin: 0 0 3.6rem; .head-image { width: 10.9rem; aspect-ratio: 109/94; img { width: 100%; height: 100%; object-fit: cover; } } } .form-content { width: 100%; .text-title { font-size: 3.6rem; line-height: 1.1; color: #fff; font-weight: 700; margin: 0 0 1.6rem; text-align: center; } .text-desc { color: #fff; margin: 0 0 2.4rem; font-weight: 500; font-size: 1.6rem; line-height: 1.7; text-align: center; } .form-item { display: flex; flex-wrap: wrap; align-items: center; grid-gap: 1.6rem; justify-content: center; align-content: center; .form-group { width: 100%; max-width: 32rem; input { width: 100%; outline: none; border: none; padding: 1.4rem 1.1rem 0.8rem; font-size: 1.6rem; background-color: #fff; border-radius: 0.6rem; color: #000; line-height: 1.5; transition: .3s all; &::placeholder { color: #000; } &:focus { outline: solid 1px #fbaf3a; } } } .form-btn { background-color: #182e4c; padding: 1.2rem 2.5rem; font-size: 1.5rem; text-align: center; line-height: 1.8; border-radius: 0.8rem; border: 1px solid #0b1523; color: #fff; transition: .3s all; &:hover { cursor: pointer; box-shadow: 0 0 #0000, 0 0 #0000, 0 0 5px #fbaf3a; } } } } .thank-content { text-align: center; width: 100%; display: none; .thank-title { font-size: 3.6rem; line-height: 1.1; color: #fff; font-weight: 700; margin: 0 0 1.6rem; text-align: center; } .thank-desc { color: #fff; margin: 0 0 2.4rem; font-weight: 500; font-size: 1.6rem; line-height: 1.7; text-align: center; } .thank-btn { display: inline-block; max-width: 100%; margin: 0 auto; background-color: #0b1523; border-radius: 0.8rem; padding: 1.2rem 2.5rem; font-size: 1.5rem; text-align: center; line-height: 1.8; border: 1px solid #0b1523; color: #fff; transition: .3s all; &:hover { cursor: pointer; outline: solid 1px #fbaf3a; } } } &.form-success { .form-content { display: none; } .thank-content { display: block; } } } @media (max-width: 992px) { .content-box { .form-head { margin: 0 0 2.0rem; } .form-content { .text-title { font-size: 2.8rem; margin: 0 0 1.2rem; } .text-desc { font-size: 1.4rem; margin: 0 0 1.6rem; } } .thank-content { .thank-title { font-size: 2.8rem; margin: 0 0 1.2rem; } .thank-desc { font-size: 1.4rem; margin: 0 0 1.6rem; } } } } }  .starify-form-2 { width: 100%; .content-box { width: 100%; padding: 2.4rem 2.4rem 3.2rem; background-color: #f9ae3a; border-radius: 2rem; .form-head { width: 100%; display: flex; justify-content: center; margin: 0 0 3.6rem; .head-image { width: 10.9rem; aspect-ratio: 109/94; img { width: 100%; height: 100%; object-fit: cover; } } } .form-content { width: 100%; .text-title { font-size: 3.6rem; line-height: 1.1; color: #000; font-weight: 700; margin: 0 0 1.6rem; text-align: center; } .text-desc { color: #000; margin: 0 0 2.4rem; font-weight: 500; font-size: 1.6rem; line-height: 1.7; text-align: center; } .form-item { display: flex; flex-wrap: wrap; align-items: center; grid-gap: 1.6rem; justify-content: center; align-content: center; .form-group { width: 100%; max-width: 32rem; input { width: 100%; outline: none; border: none; padding: 1.4rem 1.1rem 0.8rem; font-size: 1.6rem; background-color: #fff; border-radius: 0.6rem; color: #000; line-height: 1.5; transition: .3s all; &::placeholder { color: #000; } &:focus { outline: solid 1px #fbaf3a; } } } .form-btn { background-color: #182e4c; padding: 1.2rem 2.5rem; font-size: 1.5rem; text-align: center; line-height: 1.8; border-radius: 0.8rem; border: 1px solid #0b1523; color: #fff; transition: .3s all; min-width: 17rem; &:hover { cursor: pointer; box-shadow: 0 0 #0000, 0 0 #0000, 0 0 5px #fbaf3a; } } } } .thank-content { text-align: center; width: 100%; display: none; .thank-title { font-size: 3.6rem; line-height: 1.1; color: #000; font-weight: 700; margin: 0 0 1.6rem; text-align: center; } .thank-desc { color: #000; margin: 0 0 2.4rem; font-weight: 500; font-size: 1.6rem; line-height: 1.7; text-align: center; } .thank-btn { display: inline-block; max-width: 100%; margin: 0 auto; background-color: #0b1523; border-radius: 0.8rem; padding: 1.2rem 2.5rem; font-size: 1.5rem; text-align: center; line-height: 1.8; border: 1px solid #0b1523; color: #fff; transition: .3s all; &:hover { cursor: pointer; outline: solid 1px #fbaf3a; } } } &.form-success { .form-content { display: none; } .thank-content { display: block; } } } @media (max-width: 992px) { .content-box { .form-head { margin: 0 0 2.0rem; } .form-content { .text-title { font-size: 2.8rem; margin: 0 0 1.2rem; } .text-desc { font-size: 1.4rem; margin: 0 0 1.6rem; } } .thank-content { .thank-title { font-size: 2.8rem; margin: 0 0 1.2rem; } .thank-desc { font-size: 1.4rem; margin: 0 0 1.6rem; } } } } }  .starify-form-3 { width: 100%; .text-content { width: 100%; padding: 3.2rem; background-color: #f2f2f2; border-radius: 2.4rem; .text-title { letter-spacing: -0.55px; color: #000; font-size: 2.2rem; line-height: 1.2; font-weight: 700; margin: 0 0 1.6rem; } .text-desc { letter-spacing: -0.4px; font-size: 1.6rem; line-height: 1.5; color: #000; font-weight: 400; margin: 0 0 1.6rem; } .form-box { width: 100%; display: flex; grid-gap: 1.6rem; .form-input { flex: 1; position: relative; input { width: 100%; position: relative; z-index: 3; background-color: #fff; border-radius: 2.4rem; padding: 1.6rem 2.4rem 1.6rem 4.8rem; transition: .3s all; letter-spacing: -.35px; color: #000; font-size: 1.4rem; line-height: 1.25; border: none; &:focus { outline: none; box-shadow: 0 0 0 .3rem rgba(132, 232, 213, 0.2); } } svg { fill: #000; position: absolute; z-index: 5; left: 2.4rem; top: 50%; width: 1.6rem; height: 1.6rem; transform: translateY(-50%); } } .form-btn { padding: 1.5rem 2.4rem; background-color: #65e2ca; color: #000; border-radius: 2.4rem; display: inline-block; font-size: 1.6rem; letter-spacing: -.4px; line-height: 1; font-weight: 500; border: none; &:hover { cursor: pointer; } } } } @media (max-width: 992px) { padding: 0 1.5rem; .text-content { padding: 2.4rem 1.5rem; .text-title { font-size: 1.8rem; margin: 0 0 1.2rem; } .text-desc { font-size: 1.4rem; margin: 0 0 1.2rem; } .form-box { grid-gap: 1.2rem; .form-input { input { padding: 1.4rem 1.6rem 1.4rem 3.6rem; } svg { left: 1.8rem; } } .form-btn { padding: 1.4rem 2rem; font-size: 1.4rem; } } } } }  .starify-image-text-1 { width: 100%; padding: 0 0 2rem; .text-content { width: 100%; border-top: 1px solid #8e8e8e; padding: 6rem 0 0; display: flex; flex-wrap: wrap; grid-gap: 2rem; align-items: flex-start; .image-item { width: 33%; height: auto; img { width: 100%; height: 100%; object-fit: cover; } } .text-item { flex: 1; .text-title { font-size: 6rem; font-weight: 600; line-height: 1.3; color: #0a273d; margin: 0 0 1rem; } .text-desc { font-size: 2.4rem; font-weight: 400; color: #6b6d70; margin: 0 0 1.6rem; } .text-btn { display: inline-block; max-width: 100%; border-radius: 0.6rem; padding: 1.6rem 4rem; color: #000; font-size: 2rem; font-weight: bold; line-height: 1.3; background-color: #fdbd3c; transition: .3s all; &:hover { background-color: #ffca61; } } } } @media (max-width: 992px) { padding: 0 2rem 2rem; .text-content { padding: 3rem 0 0; grid-gap: 1.6rem; flex-direction: column; .image-item { width: 100%; } .text-item { .text-title { font-size: 4rem; margin: 0 0 1.6rem; } .text-desc { font-size: 2rem; } .text-btn { padding: 1.4rem 2.4rem; font-size: 1.8rem; } } } } }  .starify-image-text-2 { width: 100%; .text-content { width: 100%; text-align: center; border-bottom: 1px solid #e2e2e2; border-top: 1px solid #e2e2e2; padding: 6rem 0; .text-subtitle { display: flex; grid-gap: 1rem; align-items: center; margin: 0 0 1.4rem; justify-content: center; max-width: 100%; .subtitle-text { flex: initial; font-size: 1.6rem; line-height: 1.3; color: #bab9b9; font-weight: 500; } .subtitle-image { width: 4rem; height: 2rem; img { width: 100%; height: 100%; object-fit: contain; } } } .text-title { font-size: 3.2rem; line-height: 1.5; color: #000000; font-weight: bold; margin: 0 0 2.4rem; } .text-desc { font-size: 1.8rem; line-height: 1.5; font-weight: 400; color: #000; margin: 0 0 3.2rem; } .text-btn { display: inline-block; max-width: 100%; border-radius: 4rem; text-align: center; padding: 1.6rem 2.4rem; transition: .3s all; border: 1px solid #2c4bfd; background-color: #2c4bfd; color: #fff; font-size: 1.8rem; font-weight: 500; line-height: 1.3; &:hover { cursor: pointer; background-color: #fff; color: #2c4bfd; } } } @media (max-width: 992px) { .text-content { padding: 3rem 1.5rem; .text-subtitle { grid-gap: .8rem; margin: 0 0 1.2rem; .subtitle-text { font-size: 1.4rem; } .subtitle-image { } } .text-title { font-size: 2.4rem; margin: 0 0 1.6rem; } .text-desc { font-size: 1.4rem; margin: 0 0 2.4rem; } .text-btn { border-radius: 3rem; padding: 1.4rem 2rem; font-size: 1.6rem; } } } }  .starify-image-text-3 { width: 100%; padding: 0 0 6rem; .text-content { width: 100%; .image-item { width: 12rem; height: 12rem; position: relative; z-index: 20; border-radius: 50%; background-color: #fff; margin: -6rem auto 4.8rem; overflow: hidden; img { width: 100%; height: 100%; object-fit: cover; } } .text-item { width: 100%; text-align: center; .text-subtitle { font-size: 1.6rem; color: #1d1d1d; line-height: 1.6; font-weight: 400; margin: 0 0 1.0rem; } .text-desc { color: #1d1d1d; line-height: 1.6; font-weight: 400; font-size: 2rem; } } } @media (max-width: 992px) { padding: 0 1.5rem 3.4rem; .text-content { .image-item { margin: -6rem auto 3.2rem; } .text-item { .text-subtitle { font-size: 1.4rem; } .text-desc { font-size: 1.6rem; } } } } }  .starify-image-text-4 { width: 100%; .text-content { width: 100%; background-color: #f2f0fd; padding: 2.8rem; border-radius: 2.4rem; .text-title { font-size: 2.6rem; line-height: 1.2; font-weight: 700; color: #16161a; margin: 0 0 1rem; } .text-desc { font-size: 1.8rem; line-height: 1.4; letter-spacing: 0.36rem; color: #16161a; margin-bottom: 2.4rem; } .text-image-item { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; grid-gap: 2rem; align-items: center; .text-btn { font-size: 1.8rem; line-height: 1.4; display: inline-flex; padding: .8rem 2.4rem; justify-content: center; align-items: center; border-radius: 2.4rem; font-weight: 500; grid-gap: .8rem; background-color: #7461f2; transition: all .3s ease; color: #fff; max-width: 100%; &:after { content: "\e65d"; font-size: 1.8rem; color: #fff; line-height: 1.4; font-family: 'iconfont'; } &:hover { cursor: pointer; background-color: #8573ff; } } .logo-item { width: auto; max-width: 100%; height: 3.2rem; img { width: 100%; height: 100%; object-fit: cover; } } } } @media (max-width: 992px) { padding: 0 1.5rem; .text-content { padding: 2.4rem 1.5rem; .text-title { font-size: 2.2rem; } .text-desc { font-size: 1.6rem; margin-bottom: 1.8rem; } .text-image-item { grid-gap: 1.2rem; .text-btn { font-size: 1.6rem; padding: .8rem 2.0rem; grid-gap: .8rem; &:after { font-size: 1.6rem; } &:hover { } } .logo-item { height: 2.8rem; } } } } }  .starify-in-text-1 { width: 100%; padding: 4rem; background-color: #ecf0fa; border-radius: 20px; .text-content { display: flex; align-items: flex-start; grid-gap: 3rem; .image-item { width: 5.2rem; aspect-ratio: 52/58; img { width: 100%; height: 100%; object-fit: cover; } } .text-desc { flex: 1; font-size: 1.8rem; line-height: 1.4; color: #0c1b2c; font-weight: 400; } } @media (max-width: 992px) { padding: 3rem 2rem; .text-content { grid-gap: 1.6rem; .image-item { width: 4rem; } .text-desc { font-size: 1.6rem; } } } }  .starify-num-list-1 { width: 100%; padding: 6rem 0; //background: linear-gradient(90deg, #97E6EA 0%, #D5255E 100%); background: #fff; .num-list { width: 100%; display: flex; justify-content: center; grid-gap: 2rem; flex-wrap: wrap; .num-item { flex: 1; color: #000; display: flex; flex-direction: column; grid-gap: 1rem; text-align: center; .item-number { font-size: 6.8rem; line-height: 1; font-weight: 400; } .item-text { font-size: 1.6rem; line-height: 1.6; font-weight: 400; } } } @media (max-width: 992px) { padding: 4rem 1.5rem; .num-list { grid-gap: 2rem; flex-direction: column; .num-item { grid-gap: 1rem; text-align: center; .item-number { font-size: 4.8rem; } .item-text { font-size: 1.4rem; } } } } }  .starify-popup-content-1 { position: fixed; top: 0; left: 0; z-index: 101; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; transition: .3s all; //padding: 10rem 8rem 0; overflow: auto; &:has(input:checked){ opacity: 0; .popup-content{ transform: translateY(60px); pointer-events: none; } } .popup-content { transition-duration: 300ms; position: relative; width: 100%; max-width: 110rem; border-radius: 3rem; overflow: hidden; padding: 7rem 6rem; background-color: #283340; .content-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; img { width: 100%; height: 100%; object-fit: cover; } } .content-remove-btn { position: absolute; top: 3.6rem; right: 3.6rem; z-index: 5; width: 5rem; height: 5rem; border-radius: 50%; background-color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; border: 2px solid #fff; transition: .3s all; color: #000; font-weight: bold; font-size: 2.4rem; input{ display: none; } &:hover { cursor: pointer; background-color: transparent; color: #fff; transform: rotate(180deg); } } .content-text { position: relative; z-index: 3; .text-title { font-size: 4.8rem; font-weight: bold; color: #fff; line-height: 1.3; margin: 0 0 1.6rem; } .text-desc { font-size: 2.4rem; font-weight: 400; color: #fff; line-height: 1.5; margin: 0 0 3.2rem; } .text-btn-box { width: 100%; display: flex; grid-gap: 2rem; text-align: center; margin: 0 0 2rem; flex-wrap: wrap; .text-btn { display: inline-block; transition: .3s all; font-size: 2.4rem; line-height: 1.5; font-weight: 400; color: #283340; padding: 1.6rem 3.2rem; border-radius: 5rem; background-color: #fff; border: 3px solid #fff; &.btn-two { background-color: transparent; color: #fff; &:hover { background-color: #fff; color: #283340; } } &:hover { cursor: pointer; background-color: transparent; color: #fff; } } } .text-star-box { display: flex; align-items: flex-start; grid-gap: 1.2rem; .star-in-list { .iconfont { display: inline-block; font-size: 2rem; line-height: 1; color: #fd5252; } } .star-text { font-size: 1.4rem; color: #fff; font-weight: 400; line-height: 1.5; flex: initial; } } } } @media (max-width: 992px) { .popup-content { border-radius: 3rem; padding: 4rem 1.6rem 2rem; .content-bg { } .content-remove-btn { top: 1.2rem; right: 1.6rem; width: 3rem; height: 3rem; border: 1px solid #fff; i { font-size: 1.6rem; } } .content-text { .text-title { font-size: 3.2rem; margin: 0 0 1.2rem; } .text-desc { font-size: 1.8rem; margin: 0 0 2.0rem; br { display: none; } } .text-btn-box { grid-gap: 1.2rem; margin: 0 0 1.2rem; .text-btn { font-size: 1.8rem; padding: 0.8rem 2rem; border: 2px solid #fff; &.btn-two { background-color: transparent; color: #fff; &:hover { background-color: #fff; color: #283340; } } &:hover { cursor: pointer; background-color: transparent; color: #fff; } } } .text-star-box { display: flex; align-items: flex-start; grid-gap: 1.2rem; flex-direction: column; .star-in-list { i { font-size: 2rem; } } .star-text { font-size: 1.2rem; } } } } } }  .starify-text-1 { width: 100%; height: auto; padding: 4rem 3rem; background-color: #f4f4ef; border-top: 2px solid #69df74; .text-content { width: 100%; .text-title { font-size: 3.2rem; font-weight: 700; line-height: 1.2; color: #020000; margin-bottom: 2.4rem; } .text-desc { font-size: 2rem; font-weight: 400; line-height: 1.5; color: #636160; margin-bottom: 2.4rem; } .text-btn { transition: .3s all; background-color: #000; padding: 1.2rem 2.4rem; border-radius: 2.4rem; font-size: 1.6rem; line-height: 1.2; font-weight: 400; color: #fff; border: 1px solid #000; text-align: center; display: inline-block; max-width: 100%; &:hover { cursor: pointer; background-color: #fff; color: #000; } } } @media (max-width: 992px) { padding: 3rem 2rem; .text-content { .text-title { font-size: 2.4rem; margin-bottom: 1.6rem; } .text-desc { font-size: 1.6rem; margin-bottom: 1.6rem; } .text-btn { font-size: 1.4rem; } } } }  .starify-text-2 { background-color: #e2faf6; border-top: 1px solid #000; border-bottom: 1px solid #000; width: 100%; padding: 3rem 3rem; display: flex; align-items: flex-start; grid-gap: 3rem; .text-title { width: 45%; font-size: 2.8rem; font-weight: 700; line-height: 1.2; color: #020000; } .text-content { flex: 1; .text-desc { font-size: 1.6rem; line-height: 1.3; color: #1f1f24; font-weight: 400; margin-bottom: 3.2rem; } .text-btn { transition: .3s all; background-color: #000; padding: 1.2rem 2.4rem; border-radius: 2.4rem; font-size: 1.6rem; line-height: 1.2; font-weight: 400; color: #fff; border: 1px solid #000; text-align: center; display: inline-block; max-width: 100%; &:hover { cursor: pointer; background-color: #fff; color: #000; } } } @media (max-width: 992px) { flex-wrap: wrap; grid-gap: 1.6rem; .text-title { width: 100%; font-size: 2rem; } .text-content { .text-desc { font-size: 1.4rem; margin-bottom: 1.6rem; } } } }  .starify-text-3 { width: 100%; display: flex; align-items: center; padding: 5rem 4rem; grid-gap: 6rem; background-color: #64cc84; .text-content { flex: 1; .text-title { font-size: 2.8rem; line-height: 1.3; font-weight: 700; color: #fff; margin: 0 0 2.4rem; } .text-desc { font-size: 2rem; line-height: 1.5; color: #fff; font-weight: 400; } } .btn-box { width: auto; max-width: 48%; .text-btn { display: inline-flex; align-items: center; text-align: center; grid-gap: .2rem; background-color: #fff; border: 1px solid #64cc84; border-radius: .6rem; padding: 2rem 2.8rem; font-size: 1.6rem; line-height: 1.5; color: #64cc84; transition: .3s all; box-shadow: 0 0 10px #1e8622; max-width: 100%; svg, i { width: auto; height: 2.4rem; display: flex; align-items: center; color: inherit; } svg { path { fill: #64cc84; } } &:hover { background-color: #64cc84; color: #fff; border-color: #fff; cursor: pointer; svg { path { fill: #fff; } } } } } @media (max-width: 992px) { padding: 3rem 2rem; grid-gap: 2rem; flex-direction: column; .text-content { .text-title { font-size: 2.0rem; margin: 0 0 1.6rem; } .text-desc { font-size: 1.4rem; } } .btn-box { width: 100%; max-width: 100%; .text-btn { } } } }  .starify-text-4 { width: 100%;; display: flex; align-items: center; grid-gap: 2rem; padding: 3rem; border: 2px solid #4ac2a5; border-radius: 0.6rem; background-color: #defddd; .text-content { flex: 1; .text-title { font-weight: bold; font-size: 2.8rem; line-height: 1.2; color: #004963; margin: 0 0 1.6rem; } .text-desc { font-size: 1.6rem; font-weight: 400; line-height: 1.4; color: #004963; } } .text-btn { width: auto; max-width: 30%; display: inline-block; padding: 1.6rem 1.8rem; color: #fff; background-color: #fd4c46; font-size: 1.6rem; font-weight: 400; transition: .3s all; border: 1px solid #fd4c46; border-radius: 0.3rem; text-align: center; &:hover { cursor: pointer; background-color: #fff; color: #fd4c46; } } @media (max-width: 992px) { flex-direction: column; padding: 2rem; grid-gap: 1.6rem; align-items: flex-start; .text-content { flex: 1; .text-title { font-size: 2.4rem; margin: 0 0 1.6rem; } .text-desc { font-size: 1.6rem; } } .text-btn { max-width: 100%; font-size: 1.4rem; } } }  .starify-text-5 { width: 100%; .text-content { display: flex; width: 100%; justify-content: space-between; grid-gap: 2rem; align-items: center; padding: 1rem 1.6rem; background-color: #f4f4ef; border-radius: 2rem; overflow: hidden; &:hover { cursor: pointer; .text-title { color: #3f3f46; } svg, i { opacity: 0; transform: translateX(4rem); } } .text-title { font-size: 1.8rem; line-height: 1.2; color: #000; font-weight: 500; transition: .3s all; flex: 1; } svg, i { font-size: 2.4rem; width: 2.4rem; height: 2.4rem; text-align: center; color: #fff; background-color: #000; transition: .5s all; border-radius: 50%; } svg { padding: 0.5rem; path { fill: #fff; transition: .3s all; } } } @media (max-width: 992px) { .text-content { grid-gap: 1.2rem; .text-title { font-size: 1.4rem; } } } }  .starify-text-6 { width: 100%; .text-content { width: 100%; border-radius: 4rem; padding: 8rem 3rem; background-color: #0066fd; text-align: center; .text-title { font-size: 3.6rem; line-height: 1.3; color: #fff; font-weight: bold; margin: 0 0 3rem; } .text-btn { display: inline-block; border-radius: 4rem; color: #0066fd; transition: .3s all; border: 2px solid #fff; background-color: #fff; font-weight: 400; font-size: 1.8rem; line-height: 1.3; padding: 1.6rem 2.4rem; &:hover { cursor: pointer; background-color: transparent; color: #fff; } } } @media (max-width: 992px) { .text-content { border-radius: 3rem; padding: 3rem 1.5rem; .text-title { font-size: 2.4rem; margin: 0 0 2rem; br { display: none; } } .text-btn { font-size: 1.4rem; padding: 1.4rem 2rem; } } } }  .starify-text-7 { width: 100%; .text-content { width: 100%; border-left: 2px solid #69e075; padding: 3.2rem 3.2rem 3.2rem 1.6rem; background-color: #f4f4ef; .text-title { font-size: 1.8rem; font-weight: 400; color: #3f3f46; line-height: 1.2; margin: 0 0 2.4rem; } ul { list-style: disc; padding: 0 0 0 2.4rem; li { font-size: 1.8rem; line-height: 1.2; color: #000; font-weight: 400; margin: 0 0 1.2rem; a { text-decoration: underline; transition: .3s all; &:hover { text-decoration: none; } } } } } @media (max-width: 992px) { .text-content { padding: 2.4rem 2.4rem 2.4rem 1.6rem; .text-title { font-size: 1.6rem; margin: 0 0 2.0rem; } ul { list-style: disc; padding: 0 0 0 2.4rem; li { font-size: 1.6rem; margin: 0 0 1.0rem; } } } } }  .starify-text-list-1 { width: 100%; padding: 3rem 0; background-color: #f6f7fb; .text-list { width: 100%; display: flex; flex-wrap: wrap; grid-gap: 2rem; .text-item { width: calc((100% - 4rem) / 3); .text-title { width: 100%; border-bottom: 1px solid #c6d1f2; color: #fc6423; font-size: 4.8rem; font-weight: 600; line-height: 1.1; margin: 0 0 1.2rem; padding: 0 0 1.2rem; } .text-desc { font-size: 1.8rem; line-height: 1.4; color: #0c1b2c; font-weight: 400; } } } @media (max-width: 992px) { padding: 2rem 0; .text-list { grid-gap: 1.2rem; .text-item { width: calc(50% - 0.6rem); .text-title { font-size: 3.2rem; margin: 0 0 1rem; padding: 0 0 1rem; } .text-desc { font-size: 1.6rem; } } } } }