/* html {
    font-size: 100px;
} */
.flex-box {
    display: flex;
}
.box-title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    width: 100%;

}
.main {
    margin: 5px;
    margin-top: 30px;

}
.main-container {
    display: flex;
    justify-content: center;
    width: 100%;
}
.main-container-liter {
    width: 270px;
    height: 150px;
    --tw-bg-opacity: 1;
    background-color: rgba(255,255,255,var(--tw-bg-opacity));
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0.625rem;
    box-shadow: 0 0 10px rgb(180 189 221 / 8%), 0 6px 14px hsl(0deg 0% 100% / 30%), 0 12px 20px rgb(180 189 221 / 20%);
    padding: 1.5rem 1.5rem 2rem;
    margin-right: 80px;
}
.font-med {
    margin-top: 1rem;
    font-size: 22px;
}
.font-sml {
    margin-top: 1rem;
    font-size: 14px;
}
.main-img {
    /* width: 40%; */
}
.lx-list-container {
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding-left: 1.5rem;
}
.lx-list-item:before {
    --tw-bg-opacity: 1;
    background-color: rgba(37,84,254,var(--tw-bg-opacity));
    border-radius: 50%;
    position: absolute;
    left: -1.25rem;
    top: 11px;
    content: "";
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0 5px rgb(37 84 254 / 10%);
}
.lx-list-item {
    font-weight: 500;
    font-size: .875rem;
    line-height: 1.75rem;
    position: relative;
    --tw-text-opacity: 1;
    color: rgba(26,32,53,var(--tw-text-opacity));
}
.lx-list-item-detail {
    font-weight: 300;
    font-size: .875rem;
    line-height: 22px;
    --tw-text-opacity: 1;
    color: rgba(92,94,102,var(--tw-text-opacity));
}
.main-flex {
    display: flex;
    justify-content: center;
    background: #eeeeee52;
    padding: 20px 0px;
}
.main-img-text {
    padding-top: 50px;
}
.lx-list-header {
    font-size: 2.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgba(26,32,53,var(--tw-text-opacity));
    letter-spacing: 1px;
}
.lx-list-item {
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.75rem;
    position: relative;
    --tw-text-opacity: 1;
    color: rgba(26,32,53,var(--tw-text-opacity));
}
.lx-list .lx-list-description {
    font-weight: 400;
    font-size: 1rem;
    margin-top: 0.5rem;
    --tw-text-opacity: 1;
    color: rgba(26,32,53,var(--tw-text-opacity));
    letter-spacing: 1px;
}
.lx-list-item-detail {
    font-weight: 300;
    font-size: .875rem;
    line-height: 22px;
    --tw-text-opacity: 1;
    color: rgba(92,94,102,var(--tw-text-opacity));

}
.w-full {
    width: 100%;
}

.footer-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 0;
    background-image: url(https://static.distributetop.com/office-site-new/office-site-upload/img/app-promotion-bg.252059a.png);
    background-size: cover;
    background-position-y: bottom;
    background-repeat: no-repeat;
    width: 100%;
    /* background: #eee; */
    /* background-size: 100% 5.375rem; */
}
.footer-banner .footer-title {
    font-weight: 500;
    font-size: 2.25rem;
    line-height: 3.125rem;
    margin-bottom: 0;
    max-width: 80rem;
    text-align: center;
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity));
    /* color: #4d546a; */
    letter-spacing: 2px;
    transition-property: opacity,transform;
}
.footer-banner .footer-description {
    line-height: 1.75rem;
    display: block;
    font-weight: 300;
    font-size: 1.125rem;
    margin-top: 0.5rem;
    margin-bottom: 2.5rem;
    --tw-text-opacity: 1;
    /* color: rgba(255,255,255,var(--tw-text-opacity)); */
    /* color: #4d546a; */
    color: #fff;
}


.html {
    font-size: 100px;
}
/*      */
.product-container {
    /* background-image: url('./productback.jpg'); */
    background-size: cover;
    overflow: hidden;
}


.product-title {
    text-align: center;
}

.product-title>h4 {
    display: inline-block;
    padding: 2.5rem 0 6.5rem;
    font-size: 3.8rem;
    color: #4d546a;
    font-weight: normal;
}
.procategory-box {}

.procategory-list {
    width: 80%;
    margin: 1rem auto 0;
    overflow: hidden;
}

.procategory-list li {
    width: 25%;
    height: 20rem;
    float: left;
    text-align: center;
}

.procategory-list li .img {
    width: 5rem;
    color: #164a95;
    font-size: 5rem;
    border-radius: 50%;
    border: 2px solid #164a95;
    display: inline-block;
    text-align: center;
    height: 5rem;
    padding: 1rem;
    background-color: #fff;
    box-shadow: 0 0 0 3rem #fff;
    margin-top: 4.5rem;
    transition: all 0.5s ease-out;
}

.procategory-list li .img:hover {
    transform: scale(1.4) rotate(360deg);
    box-shadow: 0 0 0 0 #fff;
    cursor: pointer;
}

.procategory-list li .icon-c {
    width: 100%;
    position: relative;
    height: 14rem;
}

.icon-title {
    font-size: 2rem;
    color: #164a95;
    display: inline-block;
}

.pro-content {
    border: 5px solid #CA4A46;
    border-top: none;
    height: 12rem;
    width: 46%;
    margin: 3rem auto 0;
    text-align: center;
    margin-bottom: 2rem;
}

.pro-content-title {
    width: 100%;
    position: relative;
    top: 0;
    margin: 0 auto;
    height: 2rem;
    line-height: 6rem;
}

.pro-content-title .line-left,
.pro-content-title .line-right {
    height: 5px;
    background: #CA4A46;
    width: 26%;
    float: left;
}

.pro-content-title .line-right {
    float: right;
}

.pro-content-title .line-coment {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    color: #ca4a46;
    font-weight: bold;
    margin-top: -4.8rem;
}

.pro-content p {
    padding-top: 0;
    font-size: 1.5rem;
    color: #4166AD;
    line-height: 2rem;
}

.live-container {
    width: 100%;
    color: #fff;
    overflow: hidden;
    background-position: center center;
    position: relative;
    z-index: 999;
}

.live-bg {
    width: 100%;
}

.live-container .title {
    position: absolute;
    left: 50%;
    top: 20%;
    width: 85%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 1;
}

.live-container .title img {
    width: 75%;
}

.live-container .title2 {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 85%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
    font-size: 5.2rem;
}

.live-container p {
    position: absolute;
    left: 50%;
    top: 84%;
    width: 85%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 3;
    font-size: 3.6rem;
    line-height: 4rem;
}

.live-container p span {
    font-size: 3rem;
}

.live-img-container {
    position: absolute;
    right: 8.2%;
    top: 61%;
    z-index: 5;
    width: 17%;
}

.live-img-container:hover {
    animation: shake 1s;
}

.live-img-container img {
    width: 100%;
}

.live-img-container img:last-child {
    margin-left: -0.9rem;
}


/* 全球架构 */

.m-framework-container {
    display: none;
}

.framework-container {
    width: 100%;
}

.framework-container .title {}

.area-title {
    text-align: center;
    font-size: 2.5rem;
    padding-top: 0.8rem;
    /* color: #4d546a; */
    font-weight: 400;
}

.area-title.white {
    color: #fff
}

.framework-container .map-container {
    margin: 0 auto;
    width: 92%;
    position: relative;
    z-index: 0;
}

.framework-container .map {
    width: 100%;
}