.dot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .setBetween { display: flex; justify-content: space-between; } .setRowCenter { display: flex; justify-content: center; } .setColumnCenter { display: flex; align-items: center; } .setCenter { display: flex; flex-direction: column; align-items: center; justify-content: center; } .ra { border-radius: 0.2rem; overflow: hidden; } .bs { box-shadow: 0 0 0.5rem #ebebeb; } .box-shadow { box-shadow: 0rem 0.3rem 0.5rem 0rem rgba(36, 65, 116, 0.1); } .btn { padding: 0.3rem 1.3rem; background-color: #3b52f6; color: #fff; border-radius: 2rem; font-size: 0.9rem; } .btn.s1 { background-color: transparent; border: 1px solid #3b52f6; color: #3b52f6; } .a-hover:hover { color: #3b52f6; } .fb { font-family: "robotoMedium"; } .list-banner { position: relative; } .list-banner > .img { position: absolute; bottom: 0; left: 50%; width: 20.9rem; padding: 2rem; transform: translate(-50%, 50%); box-shadow: 0rem 0.15rem 0.9rem 0rem rgba(32, 30, 29, 0.35); border-radius: 0.25rem; background-color: #fff; } .list-banner h3 { font-family: "robotoMedium"; } .about { padding-top: 5rem; } .about .main-title { margin-bottom: 2rem; } .about .main-title * { text-align: left; } .about .main-title h2 { margin-bottom: 0; line-height: 1.4; } .about .main-title p { color: #333; max-width: 100%; margin-top: 0 !important; } .about .container { margin-bottom: 2rem; } .about .container b { font-family: "robotoMedium"; } .about .container h4 { font-size: 2rem; font-family: "robotoMedium"; } .about .container p { margin-top: 1.3rem; font-size: 0.9rem; font-family: 'robotoLight'!important; } .about .container span.c1 { color: #3b52f6; } .about .container em { font-weight: bold; font-family: "robotoMedium"; font-size: 1.3rem; } .about .container .f-img img { float: right; max-width: 23rem; } .about .main-1 .container h2 { font-family: "robotoMedium"; line-height: 1.2; } .about .main-1 .container h6 { font-size: 1.3rem; color: #3b52f6; } .about .main-1 .container a { font-family: "robotoMedium"; text-decoration: underline; } .about .main-2 { padding-top: 0; } .about .main-2 h3 { color: #3b52f6; text-align: center; font-weight: 500; margin-bottom: 3rem; } .about .main-2 .container .item { display: flex; align-items: center; margin-bottom: 2rem; } .about .main-2 .container .item:last-of-type { margin-bottom: 0; } .about .main-2 .container .item .i { width: 5rem; height: 5rem; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-right: 2rem; flex-shrink: 0; } .about .main-2 .container .item .i .icon { font-size: 2rem; color: #3b52f6; } .about .main-2 .container .item .text h6 { line-height: 1.4; margin-bottom: 0.5rem; } .about .main-2 .container .item .text p { line-height: 1.8; color: #000; font-size: 0.9rem; font-family: 'robotoLight'!important; } .about .main-3 { background-color: #3b52f6; } .about .main-3 * { color: #fff; } .about .main-3 h2 { color: #fff; } .about .main-4 { padding-bottom: 10rem; } .about .main-4 .container { margin-bottom: 0; } .about .main-4 .container .content p { text-align: center; line-height: 1.8; margin-bottom: 1.3rem; } .about .main-4 .container .content p:last-of-type { margin-bottom: 0; } .about .main-4 .container .img-wrap { display: flex; box-shadow: 0rem 0.15rem 0.9rem 0rem rgba(32, 30, 29, 0.35); padding: 2rem; margin-top: 2rem; } .about .main-4 .container .img-wrap .img { width: 21.3rem; flex-shrink: 0; position: relative; } .about .main-4 .container .img-wrap .img h4 { font-size: 1.3rem; line-height: 1.2; text-align: center; } .about .main-4 .container .img-wrap .img img { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 8rem); } .about .main-4 .container .img-wrap .txt p { margin-top: 0; color: #000; font-size: 0.9rem; font-family: 'robotoLight'!important; } .about .main-5 { background-color: #fafafb; } .about .main-6 { padding-top: 0; } .about .main-7 { padding-top: 0; } .about .main-7 h3 { font-size: 1.3rem; color: #3b52f6; text-align: center; font-weight: 500; margin-bottom: 3rem; } .about .main-7 .container { display: flex; flex-wrap: wrap; } .about .main-7 .container .item { width: calc((100% - (5 - 1) * 1.3rem) / 5); margin-right: 1.3rem; margin-bottom: 1.3rem; } .about .main-7 .container .item:nth-of-type(5n) { margin-right: 0; } .about .main-7 .container .item { height: 5rem; display: flex; } .about .main-7 .container .item img { margin: auto; } @media screen and (max-width: 1024px) { .about .main-4 .container .img-wrap .img img { max-width: 13rem; } } @media screen and (max-width: 820px) { .about .main-4 .container .img-wrap .img img { max-width: 18rem; } } @media screen and (max-width: 768px) { .list-banner > .img { width: 50%; padding: 1.3rem; } .about .container { margin-bottom: 0; } .about .main-1 .container h2 br { display: none; } .about .main-1 .container .img { display: none; } .about .main-2 .container .item { align-items: flex-start; } .about .main-2 .container .item .i { width: 3rem; height: 3rem; } .about .main-4 { padding-bottom: 2rem; } .about .main-4 .container .img-wrap { flex-direction: column; } .about .main-4 .container .img-wrap .img h4 br { display: none; } .about .main-4 .container .img-wrap .img img { display: none; } .about .main-5 .container { flex-wrap: nowrap; overflow-x: scroll; } .about .main-5 .container .item { width: 100%; flex-shrink: 0; } .about .main-6 .container { padding: 0; } .about .main-6 .container .swiper-slide { flex-direction: column; } .about .main-6 .container .swiper-slide .img { width: 100%; height: 12rem; } .about .main-6 .container .swiper-button { display: none; } .about .main-7 .container { margin-bottom: 0; } .about .main-7 .container .item { width: calc((100% - 1.3rem) / 3); margin-right: 0.5rem !important; } .about .main-7 .container .item:nth-of-type(4n) { margin-right: 0 !important; } }