h1.general { color: #394b57; font-size: 28px; font-weight: 300; letter-spacing: 1px; margin: 10px 30px 25px 10px; padding-bottom: 15px; float: left; background: url(../images/sprite-box_outline.png) no-repeat left bottom; } h2.general { line-height: normal; font-size: 20px; padding: 0px; } .heighlight { font-size: 18px; color: #06a2ff; line-height: 28px; } .listHead { margin-bottom: 0px!important; color: #06a2ff!important; font-weight: bold!important; font-size: 20px !important; } .stepper { margin: 40px 0px; list-style: none; display: flex; flex-direction: row; padding: 0; } .stepper .step { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0px; } .stepper .step.active .dot { background-color: #2378e1; } .stepper .step.active .lower-text { color: #2378e1; } .stepper .step.active:after { background-color: #2378e1; } .stepper .step:last-child:after { width: 50%; transform: translateX(-50%); } .stepper .step:first-child:after { transform: translateX(50%); } .stepper .step:after { content: ""; width: 100%; height: 4px; position: absolute; top: 42px; background-color: #d5d5d5; z-index: 0; } .stepper .step .upper-text { font-size: 11px; line-height: 1.5; text-align: center; color: #999; height: 20px; display: block; } .stepper .step .lower-text { margin-bottom: 0px!important; text-align: center; line-height: 28px; padding: 0px 10px; color: #06a2ff!important; font-weight: bold!important; font-size: 18px !important; } .stepper .step .dot { height: 80px; width: 80px; text-align: center; overflow: hidden; border-radius: 50%; position: relative; z-index: 1; display: inline-block; box-shadow: 0px 3px 10px 2px hsla(0, 0%, 70%, 0.5); } .bubbleGreen { background-color: #97c355; } .bubbleGreenHead { background-color: #00a79b; } .stepIcon { position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; background: no-repeat; width: 80px; height: 80px; } .planIcon { background-image: url(../images/icon_dbiz.png); background-position: 16px 16px; background-size: 350%; } .fileIcon { background-image: url(../images/icon_dbiz.png); background-position: -44px 16px; background-size: 350%; } .registIcon { background-image: url(../images/icon_dbiz.png); background-position: -108px 16px; background-size: 350%; } .approvIcon { background-image: url(../images/icon_dbiz.png); background-position: -170px 16px; background-size: 350%; } .moneyIcon { background-image: url(../images/icon_dbiz.png); background-position: -228px 16px; background-size: 350%; } .noMarginBottom { margin-bottom: 30px !important; } @media only screen and (max-width: 719px) { .stepper { display: block; text-align: center; } .customTitle { text-align: center; } .stepper li { margin-bottom: 40px !important; } .stepper .step:after { display: none; } } .row>* { flex-shrink: 0; width: 100%; max-width: 100%; margin-top: var(--bs-gutter-y); } h1 { font-size: 28px; font-weight: bold; } .row { align-items: stretch; --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(-1* var(--bs-gutter-y)); margin-right: calc(-.5* var(--bs-gutter-x)); margin-left: calc(-.5* var(--bs-gutter-x)); } .blogCard { display: block; overflow: hidden; border: 0; margin: 10px; height: 100%; border-radius: 4px; position: relative; box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; } .card-body { padding: 15px; } .cardMainImg { position: relative; overflow: hidden; } .small { font-size: 0.8rem; } .card-text { overflow: hidden; line-height: 22px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; } .blogCard:hover img { transform: scale(1.1); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .blogCard:hover a { color: #000; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .blogCard img { transform: scale(1); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .col-md-4 { margin-bottom: 20px; } .blogDate { white-space: nowrap; margin: 0 !important; } .blogDesc { font-size: 16px!important; font-weight: 300!important; line-height: 21px!important; margin: 0!important; padding: 0!important; color: #6b7881!important; margin-top: 20px!important; } .lineBtn { background-color: #fff; border: 1px solid #899399; padding: 2px 8px; margin: 5px 5px 0 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; white-space: nowrap; } h4 { padding-top: 20px; text-decoration: underline; font-weight: bold; font-size: 1.4rem; } .blogTitle { margin-bottom: 20px; align-items: end; gap: 20px; display: flex; justify-content: space-between; } .btnWrap { padding: 20px 0; display: flex; justify-content: space-between; } .blogContent ul, .blogContent ol { list-style: circle; padding-left: 20px; font-size: 1rem; line-height: normal; } .blogTag { padding: 0; margin: 0; margin-bottom: 10px; } .blogTag p { padding: 0; margin: 0 0px; display: inline-block; } .blogContent b { border: none!important; font-weight: bold !important; padding: 0!important; } .blogTag p b { font-size: 0.8rem; } .general h5 { line-height: 28px; } @media (min-width: 768px) { .col-md-4 { margin-bottom: 20px; flex: 0 0 auto; width: 33.3333%; } } @media (max-width: 768px) { .blogTitle { flex-direction: column; align-items: start; } }