- 브랜드명 템플릿화 적용 - 정적 리소스/HTML 다수 수정
- 서비스 소개 페이지 디자인/스타일 대폭 개선 - 웹훅/OAuth2 개발 가이드 문구 및 텍스트 업데이트/템플릿화
This commit is contained in:
Rinjae
@@ -908,7 +908,7 @@ hr {
|
||||
}
|
||||
.logo img {
|
||||
height: 32px;
|
||||
width: 114px;
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -1247,7 +1247,7 @@ hr {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.mobile-drawer .drawer-welcome .btn-drawer-login:hover {
|
||||
background: rgb(0, 65.7, 162);
|
||||
background: rgb(0%, 25.7647058824%, 63.5294117647%);
|
||||
}
|
||||
.mobile-drawer .drawer-welcome.authenticated {
|
||||
flex-direction: row;
|
||||
@@ -2559,7 +2559,7 @@ hr {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.btn-success:hover {
|
||||
background: rgb(83.2897959184, 199.3102040816, 106.493877551);
|
||||
background: rgb(32.662665066%, 78.1608643457%, 41.762304922%);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
.btn-danger {
|
||||
@@ -2567,7 +2567,7 @@ hr {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.btn-danger:hover {
|
||||
background: rgb(255, 70.8, 70.8);
|
||||
background: rgb(100%, 27.7647058824%, 27.7647058824%);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
.btn-ghost {
|
||||
@@ -2833,7 +2833,7 @@ hr {
|
||||
.action-btn-delete:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
background: rgb(255, 88.9, 88.9);
|
||||
background: rgb(100%, 34.862745098%, 34.862745098%);
|
||||
}
|
||||
.action-btn-delete:active {
|
||||
transform: translateY(0);
|
||||
@@ -2951,7 +2951,7 @@ hr {
|
||||
background: #a4d6ea;
|
||||
}
|
||||
.btn-input-action.btn-change:hover {
|
||||
background: rgb(131.6625, 199.4303571429, 226.5375);
|
||||
background: rgb(51.6323529412%, 78.2079831933%, 88.8382352941%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
}
|
||||
@@ -3026,7 +3026,7 @@ hr {
|
||||
border: none;
|
||||
}
|
||||
.btn-action-primary:hover {
|
||||
background: rgb(31.8731707317, 92.7219512195, 205.7268292683);
|
||||
background: rgb(12.4992826399%, 36.3615494978%, 80.6771879484%);
|
||||
transform: translateY(-2px);
|
||||
color: #fff;
|
||||
}
|
||||
@@ -3076,7 +3076,7 @@ hr {
|
||||
}
|
||||
.status-badge.status-processing {
|
||||
background: rgba(255, 217, 61, 0.1);
|
||||
color: rgb(221.2, 177.8721649485, 0);
|
||||
color: rgb(86.7450980392%, 69.7537901759%, 0%);
|
||||
}
|
||||
.status-badge.status-failed {
|
||||
background: rgba(255, 107, 107, 0.1);
|
||||
@@ -3116,7 +3116,7 @@ hr {
|
||||
}
|
||||
.status-badge-header.status-processing {
|
||||
background: rgba(255, 217, 61, 0.1);
|
||||
color: rgb(221.2, 177.8721649485, 0);
|
||||
color: rgb(86.7450980392%, 69.7537901759%, 0%);
|
||||
}
|
||||
|
||||
.badge-sm {
|
||||
@@ -4304,7 +4304,7 @@ select.form-control {
|
||||
.file-upload-wrapper .file-remove-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
background: rgb(255, 88.9, 88.9);
|
||||
background: rgb(100%, 34.862745098%, 34.862745098%);
|
||||
}
|
||||
.file-upload-wrapper .file-remove-btn:active {
|
||||
transform: translateY(0);
|
||||
@@ -4625,7 +4625,7 @@ select.form-control {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.form-actions--with-withdrawal .withdrawal-link:hover {
|
||||
background: rgb(210.2090909091, 232.6045454545, 242.9409090909);
|
||||
background: rgb(82.4349376114%, 91.2174688057%, 95.2709447415%);
|
||||
}
|
||||
.form-actions--with-withdrawal .withdrawal-link img {
|
||||
width: 22px;
|
||||
@@ -4780,7 +4780,7 @@ select.form-control {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.notice-content-box a:hover {
|
||||
color: rgb(0, 65.7, 162);
|
||||
color: rgb(0%, 25.7647058824%, 63.5294117647%);
|
||||
}
|
||||
|
||||
.form-row--content .form-label-wrapper {
|
||||
@@ -5716,7 +5716,7 @@ select.form-control {
|
||||
font-size: 16px;
|
||||
}
|
||||
.drawer-logout-btn:hover {
|
||||
background: rgb(255, 70.8, 70.8);
|
||||
background: rgb(100%, 27.7647058824%, 27.7647058824%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
|
||||
}
|
||||
@@ -6429,7 +6429,7 @@ select.form-control {
|
||||
color: #64748b;
|
||||
}
|
||||
.list-table-btn--default:hover {
|
||||
background-color: rgb(233.3571428571, 233.3571428571, 231.1928571429);
|
||||
background-color: rgb(91.512605042%, 91.512605042%, 90.6638655462%);
|
||||
}
|
||||
.list-table-btn--primary {
|
||||
background-color: #ecf0fa;
|
||||
@@ -6437,7 +6437,7 @@ select.form-control {
|
||||
color: #2a69de;
|
||||
}
|
||||
.list-table-btn--primary:hover {
|
||||
background-color: rgb(216.7625, 224.8125, 244.9375);
|
||||
background-color: rgb(85.0049019608%, 88.1617647059%, 96.0539215686%);
|
||||
}
|
||||
.list-table-btn--secondary {
|
||||
background-color: #f5f5f4;
|
||||
@@ -6445,7 +6445,7 @@ select.form-control {
|
||||
color: #64748b;
|
||||
}
|
||||
.list-table-btn--secondary:hover {
|
||||
background-color: rgb(233.3571428571, 233.3571428571, 231.1928571429);
|
||||
background-color: rgb(91.512605042%, 91.512605042%, 90.6638655462%);
|
||||
}
|
||||
.list-table-btn--danger {
|
||||
background-color: #fbe7e9;
|
||||
@@ -6453,7 +6453,7 @@ select.form-control {
|
||||
color: #bb1026;
|
||||
}
|
||||
.list-table-btn--danger:hover {
|
||||
background-color: rgb(247.5571428571, 210.3428571429, 214.0642857143);
|
||||
background-color: rgb(97.081232493%, 82.487394958%, 83.9467787115%);
|
||||
}
|
||||
|
||||
.table-pagination {
|
||||
@@ -7103,7 +7103,7 @@ select.form-control {
|
||||
.alert.alert-error {
|
||||
background: rgba(255, 107, 107, 0.1);
|
||||
border: 1px solid rgba(255, 107, 107, 0.3);
|
||||
color: rgb(255, 70.8, 70.8);
|
||||
color: rgb(100%, 27.7647058824%, 27.7647058824%);
|
||||
align-items: center;
|
||||
}
|
||||
.alert.alert-error svg {
|
||||
@@ -7117,7 +7117,7 @@ select.form-control {
|
||||
.alert.alert-success {
|
||||
background: rgba(107, 207, 127, 0.1);
|
||||
border: 1px solid rgba(107, 207, 127, 0.3);
|
||||
color: rgb(61.5183673469, 189.6816326531, 87.1510204082);
|
||||
color: rgb(24.12484994%, 74.3849539816%, 34.1768707483%);
|
||||
}
|
||||
.alert.alert-info {
|
||||
background: rgba(0, 73, 180, 0.1);
|
||||
@@ -11488,10 +11488,10 @@ body.index-page-body {
|
||||
line-height: 20px;
|
||||
}
|
||||
.login-button:hover {
|
||||
background: rgb(25.65, 70.3, 173.85);
|
||||
background: rgb(10.0588235294%, 27.568627451%, 68.1764705882%);
|
||||
}
|
||||
.login-button:active {
|
||||
background: rgb(24.3, 66.6, 164.7);
|
||||
background: rgb(9.5294117647%, 26.1176470588%, 64.5882352941%);
|
||||
}
|
||||
.login-button:disabled {
|
||||
opacity: 0.6;
|
||||
@@ -11534,10 +11534,10 @@ body.index-page-body {
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
.login-links-container .link-btn:hover {
|
||||
background: rgb(220.61, 227.85, 245.95);
|
||||
background: rgb(86.5137254902%, 89.3529411765%, 96.4509803922%);
|
||||
}
|
||||
.login-links-container .link-btn:active {
|
||||
background: rgb(205.22, 215.7, 241.9);
|
||||
background: rgb(80.4784313725%, 84.5882352941%, 94.862745098%);
|
||||
}
|
||||
|
||||
.login-alert {
|
||||
@@ -12046,12 +12046,12 @@ body.index-page-body {
|
||||
}
|
||||
.auth-request-button:hover,
|
||||
.auth-verify-button:hover {
|
||||
background: rgb(37.3117757009, 153.9304672897, 235.0082242991);
|
||||
background: rgb(14.6320689023%, 60.3648891332%, 92.1600879604%);
|
||||
transform: none !important;
|
||||
}
|
||||
.auth-request-button:active,
|
||||
.auth-verify-button:active {
|
||||
background: rgb(21.411588785, 146.3125233645, 233.148411215);
|
||||
background: rgb(8.3967014843%, 57.3774601429%, 91.4307494961%);
|
||||
}
|
||||
.auth-request-button:disabled,
|
||||
.auth-verify-button:disabled {
|
||||
@@ -12100,10 +12100,10 @@ body.index-page-body {
|
||||
background: #f0f2f5;
|
||||
}
|
||||
.account-recovery-card .form-actions .cancel-button:hover {
|
||||
background: rgb(225.45, 229.39, 235.3);
|
||||
background: rgb(88.4117647059%, 89.9568627451%, 92.2745098039%);
|
||||
}
|
||||
.account-recovery-card .form-actions .cancel-button:active {
|
||||
background: rgb(210.9, 216.78, 225.6);
|
||||
background: rgb(82.7058823529%, 85.0117647059%, 88.4705882353%);
|
||||
}
|
||||
.account-recovery-card .form-actions .submit-button {
|
||||
color: #FFFFFF;
|
||||
@@ -12113,7 +12113,7 @@ body.index-page-body {
|
||||
background: rgb(6, 54, 125);
|
||||
}
|
||||
.account-recovery-card .form-actions .submit-button:active {
|
||||
background: rgb(0, 65.7, 162);
|
||||
background: rgb(0%, 25.7647058824%, 63.5294117647%);
|
||||
}
|
||||
.account-recovery-card .form-actions .submit-button:disabled {
|
||||
opacity: 0.6;
|
||||
@@ -12349,7 +12349,7 @@ body.index-page-body {
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.result-info-box .info-text .info-link:hover {
|
||||
color: rgb(0, 65.7, 162);
|
||||
color: rgb(0%, 25.7647058824%, 63.5294117647%);
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
.result-info-box .info-text {
|
||||
@@ -17549,7 +17549,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
.btn-copy-action:hover {
|
||||
background: rgb(131.6625, 199.4303571429, 226.5375);
|
||||
background: rgb(51.6323529412%, 78.2079831933%, 88.8382352941%);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.btn-copy-action {
|
||||
@@ -17576,7 +17576,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
.btn-view-secret:hover {
|
||||
background: rgb(31.8897196262, 151.4130841121, 234.5102803738);
|
||||
background: rgb(12.5057724024%, 59.377680044%, 91.9648158329%);
|
||||
}
|
||||
.btn-view-secret svg {
|
||||
width: 20px;
|
||||
@@ -17761,7 +17761,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.btn-copy-action:hover {
|
||||
background: rgb(131.6625, 199.4303571429, 226.5375);
|
||||
background: rgb(51.6323529412%, 78.2079831933%, 88.8382352941%);
|
||||
}
|
||||
.btn-view-secret {
|
||||
width: 100% !important;
|
||||
@@ -17777,7 +17777,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
height: 16px;
|
||||
}
|
||||
.btn-view-secret:hover {
|
||||
background: rgb(31.8897196262, 151.4130841121, 234.5102803738);
|
||||
background: rgb(12.5057724024%, 59.377680044%, 91.9648158329%);
|
||||
}
|
||||
#revealedSecretBox {
|
||||
width: 100%;
|
||||
@@ -18050,7 +18050,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.detail-wrap .dt-btn-copy:hover {
|
||||
background: rgb(189.6, 230.0857142857, 255);
|
||||
background: rgb(74.3529411765%, 90.2296918768%, 100%);
|
||||
}
|
||||
.detail-wrap .dt-btn-copy svg {
|
||||
color: #2a69de;
|
||||
@@ -18231,7 +18231,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
.detail-wrap .dt-btn-gray:hover {
|
||||
background: rgb(170.6589473684, 183.4378947368, 193.6610526316);
|
||||
background: rgb(66.9250773994%, 71.9364293086%, 75.9455108359%);
|
||||
}
|
||||
.detail-wrap .dt-btn-red {
|
||||
width: 156px;
|
||||
@@ -18249,7 +18249,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
.detail-wrap .dt-btn-red:hover {
|
||||
background: rgb(255, 70.0915337423, 64.24);
|
||||
background: rgb(100%, 27.4868759774%, 25.1921568627%);
|
||||
}
|
||||
.detail-wrap .dt-btn-blue {
|
||||
width: 156px;
|
||||
@@ -19823,7 +19823,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
}
|
||||
.btn-inquiry-list:hover {
|
||||
background: rgb(215.8869565217, 218.8956521739, 224.9130434783);
|
||||
background: rgb(84.6615515772%, 85.8414322251%, 88.2011935209%);
|
||||
}
|
||||
.btn-inquiry-list:active {
|
||||
transform: scale(0.98);
|
||||
@@ -19856,7 +19856,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
}
|
||||
.btn-inquiry-edit:hover {
|
||||
background: rgb(0, 69.35, 171);
|
||||
background: rgb(0%, 27.1960784314%, 67.0588235294%);
|
||||
}
|
||||
.btn-inquiry-edit:active {
|
||||
transform: scale(0.98);
|
||||
@@ -19889,7 +19889,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
}
|
||||
.btn-inquiry-delete:hover {
|
||||
background: rgb(217.9841772152, 41.3658227848, 58.2873417722);
|
||||
background: rgb(85.4839910648%, 16.2218912882%, 22.8577810871%);
|
||||
}
|
||||
.btn-inquiry-delete:active {
|
||||
transform: scale(0.98);
|
||||
@@ -19961,7 +19961,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.file-upload-inline .btn-remove-file-inline:hover {
|
||||
background: rgb(209.4151898734, 36.2848101266, 52.8721518987);
|
||||
background: rgb(82.1236038719%, 14.2293373045%, 20.7341772152%);
|
||||
}
|
||||
.file-upload-inline .btn-remove-file-inline svg {
|
||||
width: 12px;
|
||||
@@ -19993,7 +19993,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
}
|
||||
.file-upload-inline .btn-file-attach:hover {
|
||||
background: rgb(37.3117757009, 153.9304672897, 235.0082242991);
|
||||
background: rgb(14.6320689023%, 60.3648891332%, 92.1600879604%);
|
||||
}
|
||||
.file-upload-inline .btn-file-attach svg {
|
||||
width: 22px;
|
||||
@@ -20053,7 +20053,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
border: none;
|
||||
}
|
||||
.inquiry-form-container .form-actions .btn-secondary:hover {
|
||||
background: rgb(215.8869565217, 218.8956521739, 224.9130434783);
|
||||
background: rgb(84.6615515772%, 85.8414322251%, 88.2011935209%);
|
||||
}
|
||||
.inquiry-form-container .form-actions .btn-primary {
|
||||
background: #0049b4;
|
||||
@@ -20061,7 +20061,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
border: none;
|
||||
}
|
||||
.inquiry-form-container .form-actions .btn-primary:hover {
|
||||
background: rgb(0, 69.35, 171);
|
||||
background: rgb(0%, 27.1960784314%, 67.0588235294%);
|
||||
}
|
||||
.inquiry-form-container .file-upload-inline .file-input-display {
|
||||
min-height: 50px;
|
||||
@@ -20850,7 +20850,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
cursor: pointer;
|
||||
}
|
||||
.djb-board-write-container .form-actions .btn-submit:hover {
|
||||
background-color: rgb(33.643902439, 97.8731707317, 217.156097561);
|
||||
background-color: rgb(13.193687231%, 38.3816355811%, 85.1592539455%);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.djb-board-write-container .form-actions .btn-submit {
|
||||
@@ -21386,7 +21386,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.org-file-remove:hover {
|
||||
background: rgb(255, 70.8, 70.8);
|
||||
background: rgb(100%, 27.7647058824%, 27.7647058824%);
|
||||
}
|
||||
|
||||
.org-file-notice {
|
||||
@@ -22427,7 +22427,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
.status-indicator.status-active {
|
||||
background-color: rgba(107, 207, 127, 0.1);
|
||||
color: rgb(83.2897959184, 199.3102040816, 106.493877551);
|
||||
color: rgb(32.662665066%, 78.1608643457%, 41.762304922%);
|
||||
}
|
||||
.status-indicator.status-active .status-dot {
|
||||
background-color: #6BCF7F;
|
||||
@@ -23386,81 +23386,302 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
|
||||
.service-intro {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
.service-intro__title {
|
||||
margin: 0;
|
||||
font-size: 25px;
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.service-intro__lead {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.service-intro__desc {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.service-intro__spacer {
|
||||
height: 10px;
|
||||
}
|
||||
.service-intro__section-title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.service-intro__section-body {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.service-intro__section-body p {
|
||||
margin: 0;
|
||||
}
|
||||
.service-intro__section-body p + p {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.service-intro__list {
|
||||
margin: 0;
|
||||
padding-left: 22px;
|
||||
list-style: disc;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.service-intro__list li + li {
|
||||
margin-top: 4px;
|
||||
color: #1e2939;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.service-intro {
|
||||
padding: 16px;
|
||||
gap: 16px;
|
||||
.intro-callout {
|
||||
background: #0B2A5B;
|
||||
border-radius: 16px;
|
||||
padding: 34px 40px;
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
align-items: center;
|
||||
box-shadow: 0 14px 34px rgba(11, 42, 91, 0.18);
|
||||
}
|
||||
.intro-callout__icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
flex: none;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.intro-callout ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 11px;
|
||||
}
|
||||
.intro-callout li {
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
color: #C2D4EA;
|
||||
font-size: 15.5px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.intro-callout li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: #00acdd;
|
||||
}
|
||||
.intro-callout li strong {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.intro-section__eyebrow {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 2.4px;
|
||||
color: #0049b4;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
.intro-section__title {
|
||||
font-size: 30px;
|
||||
font-weight: 900;
|
||||
letter-spacing: -1px;
|
||||
color: #0B2A5B;
|
||||
margin: 0;
|
||||
}
|
||||
.intro-section__lead {
|
||||
margin-top: 14px;
|
||||
font-size: 16px;
|
||||
color: #4a5565;
|
||||
line-height: 1.85;
|
||||
max-width: 830px;
|
||||
}
|
||||
.intro-section + .intro-section {
|
||||
margin-top: 76px;
|
||||
}
|
||||
|
||||
.intro-who {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 18px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
.intro-who__item {
|
||||
border: 1px solid #f3f4f6;
|
||||
border-radius: 14px;
|
||||
padding: 22px 20px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
}
|
||||
.intro-who__item p {
|
||||
margin-top: 6px;
|
||||
font-size: 13.6px;
|
||||
color: #4a5565;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.intro-who__title {
|
||||
margin-top: 12px;
|
||||
font-size: 15.5px;
|
||||
font-weight: 800;
|
||||
color: #0B2A5B;
|
||||
}
|
||||
|
||||
.intro-grid3 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.intro-card {
|
||||
border: 1px solid #f3f4f6;
|
||||
border-radius: 16px;
|
||||
padding: 26px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.intro-card__icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 11px;
|
||||
background: #EFF6FD;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.intro-card h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: #0B2A5B;
|
||||
letter-spacing: -0.5px;
|
||||
margin: 0;
|
||||
}
|
||||
.intro-card p {
|
||||
margin-top: 9px;
|
||||
font-size: 14.6px;
|
||||
color: #4a5565;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.intro-card code {
|
||||
font-family: "Fira Code", monospace;
|
||||
font-size: 13px;
|
||||
background: #EFF4FA;
|
||||
color: #0049b4;
|
||||
padding: 2px 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.intro-card__tag {
|
||||
display: inline-block;
|
||||
margin-top: 14px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 700;
|
||||
color: #0049b4;
|
||||
background: #EEF6FD;
|
||||
border-radius: 6px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.intro-diagram {
|
||||
margin-top: 28px;
|
||||
border: 1px solid #f3f4f6;
|
||||
border-radius: 16px;
|
||||
padding: 30px 24px;
|
||||
background: #FAFCFF;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.intro-diagram svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 700px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.intro-steps {
|
||||
margin-top: 34px;
|
||||
position: relative;
|
||||
padding-left: 38px;
|
||||
}
|
||||
.intro-steps::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 14px;
|
||||
bottom: 14px;
|
||||
width: 2px;
|
||||
background: #D8E5F3;
|
||||
}
|
||||
|
||||
.intro-step {
|
||||
display: flex;
|
||||
gap: 22px;
|
||||
margin-bottom: 18px;
|
||||
position: relative;
|
||||
}
|
||||
.intro-step::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -38px;
|
||||
top: 34px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #0049b4;
|
||||
border: 3px solid #fff;
|
||||
box-shadow: 0 0 0 3px #D9E7F7;
|
||||
}
|
||||
.intro-step__icon {
|
||||
width: 88px;
|
||||
height: 82px;
|
||||
flex: none;
|
||||
border: 1px solid #f3f4f6;
|
||||
border-radius: 14px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #fff;
|
||||
}
|
||||
.intro-step__body {
|
||||
flex: 1;
|
||||
border: 1px solid #f3f4f6;
|
||||
border-radius: 14px;
|
||||
padding: 19px 26px;
|
||||
background: #fff;
|
||||
}
|
||||
.intro-step__body p {
|
||||
margin-top: 5px;
|
||||
font-size: 14.4px;
|
||||
color: #4a5565;
|
||||
}
|
||||
.intro-step__title {
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
color: #0B2A5B;
|
||||
}
|
||||
.intro-step__title em {
|
||||
font-style: normal;
|
||||
color: #0049b4;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.6px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.intro-cta {
|
||||
margin-top: 64px;
|
||||
border-radius: 18px;
|
||||
padding: 38px 44px;
|
||||
background: linear-gradient(100deg, #EAF4FD, #DFEDFB);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
border: 1px solid #D5E6F7;
|
||||
}
|
||||
.intro-cta__body h3 {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
color: #0B2A5B;
|
||||
}
|
||||
.intro-cta__body p {
|
||||
margin-top: 6px;
|
||||
font-size: 15px;
|
||||
color: #4a5565;
|
||||
}
|
||||
.intro-cta .btn-action-primary {
|
||||
margin-left: auto;
|
||||
flex: none;
|
||||
font-size: 15.5px;
|
||||
padding: 15px 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.intro-who,
|
||||
.intro-grid3 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.service-intro__title {
|
||||
font-size: 22px;
|
||||
.intro-cta {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.service-intro__lead {
|
||||
font-size: 17px;
|
||||
.intro-cta .btn-action-primary {
|
||||
margin-left: 0;
|
||||
}
|
||||
.service-intro__section-title {
|
||||
font-size: 17px;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.intro-who,
|
||||
.intro-grid3 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.service-intro__desc, .service-intro__section-body, .service-intro__list {
|
||||
font-size: 14px;
|
||||
.intro-callout {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.intro-section__title {
|
||||
font-size: 24px;
|
||||
}
|
||||
.intro-step {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.service-main {
|
||||
|
||||
Reference in New Issue
Block a user