.Box {
    padding: 0 0.6% 0.6% 0.6%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.banner {
    width: 100%;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}

.banner>img {
    width: 100%;
}

.banner>.title {
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.banner>.title>h2 {
    font-family: Gillroy Bold;
    text-transform: uppercase;
    font-size: var(--48px--);
    line-height: 125%;
    color: #fff;
    margin-bottom: 10px;
    text-align: center;
}

.banner>.title>.crumb {
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner>.title>.crumb>svg {
    margin-right: 5px;
}

.banner>.title>.crumb>a {
    font-family: Gillroy regular;
    font-size: var(--16px--);
    text-transform: capitalize;
    line-height: 120%;
}

/* page:product */
.proBox {
    width: 1280px;
    margin: 60px auto;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.proNav {
    margin-bottom: 60px;
}

.proNavBox {
    width: 25%;
    padding-right: 20px;
    margin-right: 20px;
    border-right: 1px solid #ededed;
}

.proNavBox>.Search {
    width: 100%;
    height: 45px;
    position: relative;
    margin-bottom: 45px;
}

.Search>input {
    width: 100%;
    height: 100%;
    padding: 10px 40px 10px 20px;
    font-family: Gillroy regular;
    font-size: var(--16px--);
    border: 1px solid #eeeeee;
    border-radius: 5px;
    transition: all .6s;
}

.Search>input:focus {
    outline: none;
    border: 1px solid #9d9d9d;
}

.Search>svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    cursor: pointer;
}

.proCatalog {
    width: 100%;
}

.proCatalog>img {
    width: 100%;
    object-fit: contain;
    margin-bottom: 25px;
}

.proCatalog>a {
    display: block;
    text-align: center;
    font-size: var(--16px--);
    line-height: 150%;
    transition: all .6s;
}

.proCatalog>a:hover {
    color: #c80877;
}

.proBox>div:nth-child(2) {
    width: calc(75% - 20px);
}

.proList {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
    gap: 15px;
    align-content: start;
    margin-bottom: 60px;
}

.proNav>h3 {
    font-family: Gillroy Bold;
    text-transform: capitalize;
    font-size: var(--18px--);
    color: #000;
    margin-bottom: 35px;
}

.proNav>ul>li {
    margin-bottom: 30px;
}

.proNav>ul>li>a {
    font-size: var(--16px--);
    text-transform: capitalize;
    line-height: 150%;
    transition: all .6s;
}

.proActiveNav>a,
.proTwoActiveNav {
    color: #c80877 !important;
}

.twoProNav {
    border-left: 1px solid #e6e6e6;
    /* display: flex; */
    display: none;
    flex-direction: column;
    margin-top: 10px;
}

.twoProNav>a {
    font-family: Onsite standard Light;
    font-size: var(--16px--);
    color: #666;
    position: relative;
    padding-left: 15px;
    line-height: 150%;
    text-transform: capitalize;
    margin: 10px 0;
    transition: all .6s ease;
}

.twoProNav>a::before {
    content: '';
    width: 10px;
    height: 1px;
    background-color: #e6e6e6;
    position: absolute;
    left: -5px;
    top: 50%;
}

.twoProNav>a:last-child {
    margin-bottom: 0;
}

.twoProNav>a:last-child::after {
    content: '';
    position: absolute;
    top: calc(50% + 1px);
    left: -1px;
    width: 10px;
    height: 50%;
    background-color: #fff;
}

.proActiveNav>.twoProNav>a::before,
.proActiveNav1>.twoProNav>a::before {
    left: 0;
}

.proActiveNav>.twoProNav,
.proActiveNav1>.twoProNav {
    display: flex;
}

.proNav>ul>li>a:hover,
.twoProNav>a:hover {
    color: #c80877;
}

.proItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border: 1px solid #efefef;
    transition: all .6s;
}

.proItem>.ImgBox {
    width: 100%;
    height: 280px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid #f3f3f3;
}

.proItem>.ImgBox>img {
    width: 70%;
    height: 100%;
    object-fit: contain;
}


.proItem>.title {
    width: 80%;
    margin: 30px 0 calc(20px);
    flex-grow: 1;
}

.proItem>.title>div {
    height: 100%;
    display: block;
    font-family: Onsite standard Light;
    font-size: var(--16px--);
    line-height: 150%;
    text-align: center;
    transition: color .3s;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.proItem:hover {
    box-shadow: 0px 13px 24px 0px rgba(6, 42, 96, 0.11);
}

.proItem:hover>.title>div {
    color: #c80877;
}

/* page:product-detail */
.proContent>.intro {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.proContent>.intro>.left {
    width: 50%;
}

.proContent>.intro>.right {
    width: calc(50% - 30px);
}

.proSwiper,
.thumbProSwiper {
    width: 100%;
}

.proSwiper {
    aspect-ratio: 1 / 1;
    border: 1px solid #f4f4f4;
    border-radius: 15px;
    margin-bottom: 20px;
}

.thumbProSwiper {
    margin-bottom: 40px;
}

.proSwiper>.swiper-wrapper>.swiper-slide,
.thumbProSwiper>.swiper-wrapper>.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.proSwiper>.swiper-wrapper>.swiper-slide {
    padding: 5%;

}

.proSwiper>.swiper-wrapper>.swiper-slide>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.thumbProSwiper>.swiper-wrapper>.swiper-slide {
    aspect-ratio: 1 / 1;
    border: 1px solid #f4f4f4;
    border-radius: 5px;
    cursor: pointer;
    padding: 10px;
    transition: all .6s;
}

.thumbProSwiper>.swiper-wrapper>.swiper-slide>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.thumbProSwiper .swiper-slide {
    overflow: hidden;
}

.thumbProSwiper .swiper-slide.swiper-slide-thumb-active {
    border: 1px solid #646464;
}

.proHandoff>div {
    color: #000;
    font-size: var(--16px--);
    margin-bottom: 15px;
}

.proHandoff>div>a {
    color: #999;
    text-transform: capitalize;
}

.proContent hr {
    margin: 30px 0;
    height: 1px;
    background-color: #eaeaea;
    border: none;
}

.proContent>.intro>.right>h3 {
    font-family: Gillroy Bold;
    font-size: var(--30px--);
    line-height: 36px;
}

.proContent>.intro>.right>p {
    font-size: var(--36px--);
    line-height: 48px;
    color: #c80877;
    margin-bottom: 55px;
}

.proContent>.intro>.right>h4 {
    font-family: Gillroy Bold;
    font-size: var(--16px--);
    margin-bottom: 15px;
}

.proContent>.intro>.right>table {
    width: 100%;
    border-top: 1px solid #909090;
    border-bottom: 1px solid #909090;
    padding: 15px 0;
    margin-bottom: 65px;
}

.proContent>.intro>.right>table td:nth-child(1) {
    /* width: 100px; */
    width: 30%;
    font-family: Gillroy regular;
    font-size: var(--14px--);
    line-height: 150%;
    padding: 8px 0;
}

.proContent>.intro>.right>table td:nth-child(2) {
    font-family: Gillroy regular;
    font-size: var(--14px--);
    line-height: 150%;
    padding: 8px 0;
    color: #999;
}

.curLine {
    height: 1px;
    line-height: 210px;
    background-color: #e8e8e8;
}

.curLine>td {
    padding: 0 !important;
}

.curk {
    height: 5px;
}

.agreement {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.agreement>a {
    margin-bottom: 15px;
}

.proContent>.Content>h3 {
    font-family: Gillroy Bold;
    font-size: var(--16px--);
    color: #000;
    margin: 30px 0;
}

.proContent>.Content>h4 {
    font-family: Gillroy Bold;
    line-height: 150%;
}

.proContent>.Content table {
    width: 100%;
    border-top: 1px solid #a7a7a7;
    border-bottom: 1px solid #a7a7a7;
    margin-bottom: 50px;
    padding: 0;
    /* border-collapse: collapse; */
    border-spacing: 0;
}

.proContent>.Content table th,
.leftCb>table tr td:nth-child(1) {
    text-align: left;
    color: #c80877;
    font-size: var(--16px--);
    background-color: #f1f3f5;
    padding: 10px 15px;
}

.proContent>.Content strong {
    color: #c80877;
}

.proContent>.Content table tr th {
    font-weight: lighter;
}

.proContent>.Content table tr th,
.proContent>.Content table tr td {
    padding: 15px;
    border-top: 1px solid #e1e3e5;
    border-right: 1px solid #e1e3e5;
}

.proContent>.Content table tr td {
    font-size: var(--16px--);
}

.proContent>.Content table tr td:last-child {
    border-right: 0;
}

.proContent>.Content span,
.proContent>.Content p,
.proContent>.Content li {
    font-family: Gillroy regular;
    font-size: var(--16px--);
    margin: 10px 0;
    line-height: 150%;
}

.proContent>.Content ul {
    list-style: disc;
}

.proContent>.Content ul,
.proContent>.Content ol {
    list-style-position: inside;
}

.proContent>.Content ul ol {
    padding-left: 20px;
}

.proContent>.Content img {
    max-width: 100%;
    display: inline;
}

.recProSwiper {
    width: 100%;
    padding-bottom: 40px !important;
}

.recPro>h3 {
    font-family: Gillroy Bold;
    font-size: var(--16px--);
    color: #000;
    margin-bottom: 40px;
}

.recProPagin {
    text-align: center;
}

.recProPagin>.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
}

.recProPagin .swiper-pagination-bullet-active {
    border-color: #c80877 !important;
    background-color: #c80877 !important;
}

.recProPagin span {
    border: 1px solid #6a6a6a;
    background-color: #f1f3f5;
}

/* page:support */
.sup1 {
    width: 1280px;
    margin: clamp(60px, 6.770833333333vw, 130px) auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sup1>.title {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sup1>.title>h3 {
    font-family: Onsite standard Bold;
    font-size: var(--48px--);
    line-height: 120%;
    margin-bottom: 25px;
    text-align: center;
}

.sup1>.title>img {
    margin-bottom: 40px;
}

.sup1>.title>p {
    font-size: var(--16px--);
    color: #666666;
    text-align: center;
    line-height: 150%;
    margin-bottom: clamp(40px, 4.16666666667vw, 80px);
}

.sup1>.title>p>span {
    display: block;
}

.sup1Content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sup1Content>div:nth-child(1) {
    width: 48%;
    border-radius: 15px;
    overflow: hidden;
}

.sup1Content>div:nth-child(1)>img {
    width: 100%;
}

.sup1Content>div:nth-child(2) {
    width: 45%;
}

.sup1Content>div>p {
    font-family: Onsite standard Light;
    font-size: var(--16px--);
    line-height: 187.5%;
    margin-bottom: clamp(20px, 2.08333333333vw, 40px);
}

.sup1Content>div>p:nth-child(3) {
    margin-bottom: 80px;
}

.sup1Content>div>.imgBox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.sup1Content>div>.imgBox>img {
    /* max-width: 150px;  */
    height: 60px;
    object-fit: contain;
    margin-right: 15px;
    margin-bottom: 30px;
}
.sup1Content>div>.imgBox>img:last-child{
    max-width: 300px;
}

.sup2 {
    width: 100%;
    border-radius: 15px;
    background-color: #f1f3f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}

.sup2Content {
    width: 1280px;
    padding: clamp(60px, 6.25vw, 120px) 0;
}

.sup2Content>h3 {
    font-family: Onsite standard Bold;
    font-size: var(--36px--);
    line-height: 160%;
    margin-bottom: 45px;
}

.sup2Content>p {
    font-family: Onsite standard Light;
    font-size: var(--16px--);
    color: #666;
    line-height: 30px;
}

.sup2Content>h4 {
    font-family: Onsite standard Light;
    font-size: var(--16px--);
    margin-top: 45px;
    color: #c80877;
    line-height: 30px;
}

.sup2Content>ul {
    margin-bottom: clamp(40px, 4.16666666667vw, 80px);
}

.sup2Content>ul>li {
    font-family: Onsite standard Light;
    font-size: var(--16px--);
    color: #221815;
    line-height: 30px;
}

.sup2Content>ul>li::before {
    content: '▪';
    font-family: Onsite standard Bold;
    font-size: var(--18px--);
    color: #c80877;
    margin-right: 5px;
}

.sup2Content>.imgBox {
    display: flex;
    margin-bottom: 20px;
}

.sup2Content>.imgBox>img {
    max-width: 100%;
    margin-right: 35px;
    margin-bottom: 10px;
    transition: all .6s ease;
    object-fit: contain;
}

.SystemIntro {
    margin-top: 40px;
}

.SystemIntro>h3 {
    font-family: Onsite standard Bold;
    font-size: var(--36px--);
    line-height: 160%;
    margin-bottom: 45px;
}

.SystemIntro>img {
    width: 40%;
    margin-bottom: 45px;
}

.SystemIntro>h4 {
    font-family: Onsite standard Light;
    font-size: var(--18px--);
    margin-bottom: 25px;
    color: #c80877;
    line-height: 30px;
}

.SystemIntro>p {
    font-family: Onsite standard Light;
    font-size: var(--16px--);
    color: #221815;
    line-height: 30px;
    margin-bottom: 10px;
}

.SystemIntro>p>span {
    font-family: Onsite standard Light;
    color: #c80877;
    font-weight: 600;
}

.suppo-img {
    display: flex;
    flex-wrap: wrap;
}

/* .suppo-img>img:nth-child(1){
    width: 40%;
} */
.suppo-img>img {
    width: auto;
    object-fit: contain;
}

/* page:about */
.ab1 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: max(80px, 7.8125vw);
}

.ab1>.title {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 90px 0;
}

.ab1>.title>span {
    font-family: Onsite standard Medium;
    font-size: var(--14px--);
    color: #666666;
    letter-spacing: 2.8px;
    text-transform: uppercase;
}

.ab1>.title>h3 {
    font-family: Onsite standard Bold;
    font-size: var(--48px--);
    line-height: 120%;
    text-align: center;
    margin: 20px 0 35px 0;
}

.ab1>.title>h3>span {
    display: block;
}

.ab1>.Content {
    width: 1280px;
}

.ab1>.Content>.ab1c1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ab1c1 {
    margin-bottom: clamp(60px, 6.8125vw, 150px);
}

.ab1c1>div:nth-child(1) {
    width: 50%;
    overflow: hidden;
    border-radius: 15px;
}

.ab1c1>div:nth-child(1)>img {
    width: 100%;
    object-fit: cover;
}

.ab1c1>div:nth-child(2) {
    width: calc(50% - 90px);
    position: relative;
}

.ab1c1>div:nth-child(2)>h4,
.ab1c1>div:nth-child(2)>div>h4 {
    font-family: Gillroy Bold;
    font-size: var(--30px--);
    color: #000;
    margin-bottom: 35px;
    line-height: 120%;
}

.ab1c1>div:nth-child(2)>div>h4 {
    margin: 10px 0 clamp(10px, 1.8222916666667vw, 35px) 0;
}

.ab1c1>div:nth-child(2)>div>p {
    font-family: Onsite standard Light;
    font-size: var(--16px--);
    color: #666;
    margin-bottom: 35px;
    line-height: 187.5%;
}

.ab1c1>div:nth-child(2)>div {
    position: relative;
    margin-bottom: 35px;
}

.ab1c1>div:nth-child(2)>div>p:nth-child(n-1) {
    margin-bottom: 0px;
}

.ab1c1>div:nth-child(2)>div>p:nth-child(4) {
    margin-bottom: 0;
}

.ab1c2>div:nth-child(2)>div>p:nth-child(4) {
    margin-bottom: max(35px, 3.6458333333333vw);
}

/* .ab1c1>div:nth-child(2)>div>p>span {
    font-family: Onsite standard Medium;
    color: #000;
} */

.shrinkBox {
    transition: all .6s ease;
}



.shrinkBtn {
    display: none;
    text-align: right;
    margin-bottom: 20px;
    text-decoration: underline;
    cursor: pointer;
}

.ab1c2 {
    flex-direction: row-reverse;
}

.ab1c2>div:nth-child(2) {
    width: calc(50% - 55px);
}

.ab1Counter {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.ab1Counter>div:nth-child(1) {
    margin-bottom: 20px;
}

.ab1Counter>div>p {
    font-size: var(--16px--);
    color: #000;
    margin-bottom: 10px;
}

.ab1Counter>div>h5 {
    font-family: Gillroy Bold;
    font-size: var(--48px--);
    color: #c80877;
}

.ab1Counter>div>span {
    font-family: Gillroy Bold;
    font-size: var(--18px--);
    color: #c80877;
}

.ab1Counter::before {
    content: '';
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 55%;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(204, 204, 204, 1) 15%, rgba(204, 204, 204, 1) 85%, rgba(255, 255, 255, 1) 100%);
}

.ab2 {
    width: 100%;
    background-color: #f1f3f5;
    margin-bottom: 10px;
    padding: max(60px, 7.8125vw) 0;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ab2>h3 {
    font-family: Onsite standard Bold;
    font-size: var(--40px--);
    line-height: 48px;
    text-align: center;
    margin-bottom: max(25px, 2.34375vw);
}

.ab2>p {
    text-align: center;
    line-height: 150%;
    font-size: var(--16px--);
    opacity: 0.6;
    margin-bottom: 75px;
}

.ab2>p>span {
    display: block;
}

.ab2>div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.ab2>div>img {
    /* width: 90px;
    height: 80px; */
    object-fit: contain;
    margin-right: 35px;
    margin-bottom: 15px;
}

/* page:new */
.newBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: max(60px, 5.20833333333vw) 0;
    background-color: #f1f3f5;
    border-radius: 15px;
    margin: 10px 0;
}

.newList {
    width: 1280px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: max(25px, 4.16666666667vw);
}

.newItem>div {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background-color: #fff;
}

.newImg {
    width: 100%;
    height: max(270px, 15.625vw);
    border-radius: 10px;
    overflow: hidden;
}

.newImg>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 3s;
}

.newItem>div:hover>.newImg>img {
    transform: scale(1.1);
}

.newNewCon {
    height: calc(100% - max(270px, 15.625vw));
    padding: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.newNewCon h3 {
    font-family: Gillroy regular;
    font-size: var(--18px--);
    line-height: 24px;
    text-align: center;
    margin-bottom: 25px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.newNewCon p {
    font-family: Gillroy regular;
    font-size: var(--16px--);
    color: #999;
    margin-bottom: 50px;
}

.newNewCon>.btn {
    margin-top: auto;
    border: 1px solid #ebebeb;
}


.newNewCon>button:hover {
    background-color: #c80a78;
}

.newNewCon>button:hover>a {
    color: #fff;
}

.new>.btn {
    background-color: #0d161e;
}

.new>.btn:hover {
    background-color: transparent;
    border: 1px solid #0d161e;
}

.new>.btn:hover>a {
    color: #0d161e;
}

.new>.btn>a {
    color: #fff;
}

/* page:new-detail */
.newCont {
    width: 100%;
    border-radius: 15px;
    padding: max(60px, 5.20833333333vw) 0;
    background-color: #f1f3f5;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.newCont>div {
    width: 1280px;
}

.newTitle {
    text-align: center;
    font-size: var(--40px--);
    line-height: 150%;
}

.newCont>div>hr {
    margin: 1.563vw 0;
}

.newInfo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.newInfo>p {
    text-align: center;
    color: #999;
}

.newInfo>p:first-child {
    margin-right: 20px;
}

.newContent {
    font-size: var(--16px--);
    line-height: 200%;
    font-weight: 300;
}

.newContent h3 {
    color: #333;
}

.newContent p {
    color: #666;
}

.newContent a {
    color: #333;
    text-decoration: underline;
}

.newContent img {
    max-width: 100%;
    display: inline;
}

.NPage>p {
    margin-bottom: 10px;
}

.NPage>p>a {
    transition: all .6s ease;
    color: #666;
    text-transform: capitalize;
}

.NPage>p:hover>a {
    color: #c80877;
}

/* page:contact */
.cpage1 {
    width: 1280px;
    padding: max(60px, 2vw) 0;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.cpage1>.map {
    width: 50%;
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
}

.cpage1>.info {
    width: calc(50% - 5.208333333333vw);
    display: flex;
    flex-direction: column;
}

.cpage1>.info>div>h3 {
    font-family: Gillroy Bold;
    font-size: var(--48px--);
    color: #c80877;
    line-height: 100%;
}

.cpage1>.info>div>.title {
    display: block;
    font-size: var(--16px--);
    color: #999;
    margin-bottom: 15px !important;
}

.cpage1>.info>div>p {
    font-size: var(--18px--);
    color: #000;
}

.cpage1>.info>.address>p {
    font-family: Gillroy Bold;
    font-size: var(--16px--);
    margin-bottom: 10px;
}

.cpage1>.info>.address>span {
    display: block;
    font-family: Gillroy regular;
    font-size: var(--16px--);
    margin-bottom: 20px;
}

.cpage1>.info>.Hotline>p {
    margin-bottom: 20px;
}

.cpage1>.info>.Hotline {
    margin-bottom: clamp(30px, 3.385416666667vw, 65px);
}

.cpage1>.info>div {
    margin-bottom: 30px;
}

.cpage1>.info>.follow {
    margin-top: auto;
    margin-bottom: 0;
}

.cpage1>.info>.follow>div {
    display: flex;
}

.cpage1>.info>.follow>div>a>svg {
    width: 32px;
    height: 32px;
    margin-right: 25px;
}

.cpage2 {
    width: 100%;
    margin: 10px 0;
    background-color: #f1f3f5;
    border-radius: 15px;
    padding: clamp(30px, 5.208333333333vw, 100px);
    display: flex;
    justify-content: center;
}

.cpage2>div {
    width: 1280px;
}

.cpage2>div>h3 {
    font-family: Gillroy Black;
    font-size: clamp(80px, 8.85416666667vw, 170px);
    text-transform: uppercase;
    color: #fff;
    line-height: 100%;
}

.cpage2>div>p {
    font-size: var(--16px--);
    color: #666;
    line-height: 150%;
    margin-bottom: clamp(40px, 5.208333333333vw, 100px);
}

.cpage2>div>p>span {
    display: block;
}

.cpage2>div>form {
    width: 100%;
    /* display: flex; */
    position: relative;
}

.cpage2>div>form>.row {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.cpage2>div>form>.row:not(:last-child) {
    margin-bottom: 20px;
}

.cpage2>div>form>.row>.column {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.cpage2>div>form>.row>.column:last-child {
    width: calc(50% - 60px);
}

.cpage2>div>form>.row>.column>div:not(:last-child) {
    width: 100%;
    margin-bottom: 20px;
}

.required>p::after {
    content: '*';
    color: #e70000;
}

.cpage2>div>form>.row>.column>div>p,
.cpage2>div>form>.row>.column>p {
    font-size: var(--16px--);
    color: #000;
    margin-bottom: 10px;
}

.cpage2>div>form>.row>.column>div>input {
    width: 100%;
    /* height: 50px; */
}

.cpage2>div>form input,
.cpage2>div>form>.row>.column>textarea {
    border: 1px solid transparent;
    border-radius: 5px;
    transition: all .6s;
    padding: 15px 20px;
    overflow: hidden;
}

.cpage2>div>form>.row>.column>textarea {
    resize: none;
}

.cpage2>div>form input:focus,
.cpage2>div>form>.row>.column>textarea:focus {
    outline: none;
    border: 1px solid #666;
}

.cpage2>div>form>.row>.column>p {
    flex-shrink: 0;
}

.cpage2>div>form>.row>.column>textarea {
    width: 100%;
    flex-grow: 1;
}

.cpage2>div>form>.row>.column>button {
    width: 200px;
    height: 50px;
    border: 1px solid transparent;
    background-color: #0d161e;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    transition: all .6s;
    text-transform: uppercase;
}

.cpage2>div>form>.row>.column>button:hover {
    background-color: transparent;
    border-color: #0d161e;
    color: #0d161e;
}

.cpage2>div>form>.row:last-child>.column:last-child {
    align-items: end;
}

.cpage2>div>form>.row>.column>div>div {
    display: flex;
    align-items: center;
}

.cpage2>div>form>.row>.column>div>div>input {
    flex: 2;
    margin-right: 30px;
}

.cpage2>div>form>.row>.column>div>div>img {
    flex: 1;
    margin-right: 15px;
    user-select: none;
}

.cpage2>div>form>.row>.column>div>div>svg {
    cursor: pointer;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* search */
.search>.title {
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
}

.search>.title>h3,
.search>.title>p {
    font-family: Gillroy Bold;
    text-transform: capitalize;
    font-size: var(--18px--);
    color: #000;
    margin-bottom: 15px;
}

.search>.title>h3 {
    color: #c80877;
    margin-left: 10px;
    font-size: var(--20px--);
}

/* App control */
.appCon {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}

.appCon>.left {
    width: 25%;
}

.appCon>.left>a {
    display: block;
    width: 80%;
    margin-bottom: 60px;
    cursor: pointer;
}

.appCon>.left>a>div {
    aspect-ratio: 1 / 1;
    border: 4px solid #c70577;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.appCon>.left>a>div>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.appCon>.left>a>p {
    font-family: Gillroy regular;
    font-size: var(--24px--);
    font-weight: 600;
}

.appCon .hand>div {
    width: auto;
    height: auto;
    aspect-ratio: auto !important;
    padding: 0 !important;
    border: 0px !important;
    margin-bottom: 0 !important;
}

.appCon .hand>div>img {
    width: auto;
    height: auto;
}

.appCon>.right {
    width: 70%;
}

.appCon>.right>h3 {
    font-family: Gillroy Bold;
    color: #c90c79;
    font-size: var(--36px--);
    margin-bottom: 30px;
}

.appCon>.right>h4 {
    /* font-family: Gillroy Bold; */
    font-size: var(--24px--);
    margin-bottom: 20px;
    font-weight: 600;
}

.appCon>.right>p {
    font-size: var(--16px--);
    color: #333;
    margin-bottom: clamp(30px, 3.125vw, 60px);
}

.appCon>.right>.tit {
    font-family: Gillroy Bold;
    color: #c90c79;
}

.appCon>.right ul {
    list-style: disc;
    list-style-position: inside;
    margin-bottom: clamp(30px, 3.125vw, 60px);
}

.appCon>.right ul li {
    font-size: var(--16px--);
    margin: 10px 0;
}

.appCon>.right table {
    width: 100%;
    /* min-width: 600px; */
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    background-color: #f4f4f4;
    border-spacing: 0;
}

.appCon>.right>img {
    width: 100%;
    margin-bottom: clamp(30px, 3.125vw, 60px);
}

.appCon>.right .tableSc {
    width: 100%;
    overflow: hidden;
    overflow-x: scroll;
}

.appCon>.right .tableSc::-webkit-scrollbar {
    height: 5px;
}

.appCon>.right table tr td {
    padding: 15px;
    font-size: var(--16px--);
}

.appCon>.right table tr,
.appCon>.right table tr td {
    width: auto;
    white-space: nowrap;
}

.appCon>.right table thead tr td {
    color: #c70577;
    font-weight: 600;
}

.appCon>.right table tbody tr td {
    border-top: 1px solid #000;
}

.appCon>.right table tr td:not(:last-child) {
    border-right: 1px solid #000;
}


.ab1c1 .unfolds {
    height: 655px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: var(--clamp--);
    -webkit-box-orient: vertical;
}

.ab1c2 .unfolds {
    height: 180px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: var(--clamp--);
    -webkit-box-orient: vertical;
}

@media (min-width: 2000px) {

    .proBox,
    .sup1,
    .sup2Content,
    .ab1>.Content,
    .newList,
    .newCont>div,
    .cpage1,
    .cpage2>div {
        width: 80%;
    }
}

@media (max-width: 1300px) {

    .proBox,
    .sup1,
    .sup2Content,
    .ab1>.Content,
    .newList,
    .newCont>div,
    .cpage1,
    .cpage2>div {
        width: 80%;
    }

    .proList {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .sup1>.title>p>span {
        display: inline;
    }
}

@media (max-width: 1200px) {
    .ab1c1>div:nth-child(2)>div {
        margin-bottom: 10px;
    }

    .ab1c1>div:nth-child(2)>h4 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;

    }


    /* .shrinkBtn {
        display: block;
    } */

    .ab1Counter::before {
        display: none;
    }

    .ab1Counter {
        flex-wrap: wrap;
    }

    .ab1c1 .unfolds {
        height: 360px;
    }
    .ab1c2 .unfolds {
        height: 180px;
    }
}

@media (max-width: 1000px) {
    .sup1Content {
        flex-direction: column-reverse;
    }

    .sup1Content>div {
        width: 100% !important;
    }

    .sup1Content>div:nth-child(1) {
        height: 300px;
    }

    .sup1Content>div>p:nth-child(3) {
        margin-bottom: 40px;
    }

    .ab2 {
        padding: max(60px, 7.8125vw) 10%;
    }

    .ab2>p>span {
        display: inline;
    }

    .newList {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .proBox {
        flex-direction: column;
    }

    .proNavBox {
        width: 100%;
        border-right: 0;
        padding: 0;
    }

    .proNav {
        margin-bottom: 25px;
    }

    .proNav>ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        /* place-items: center; */
        align-items: center;
        gap: 10px;
    }

    .twoProNav {
        display: none !important;
    }

    .proCatalog {
        display: none;
    }

    .proBox>div:nth-child(2) {
        width: 100%;
    }

    /* 详情 */
    .proDetail {
        display: none;
    }

    .banner {
        height: 300px;
    }

    .banner>img {
        height: 100%;
    }

    /* support */
    .sup1>.title {
        width: 100%;
    }

    .sup2Content>.imgBox {
        flex-wrap: wrap;
    }

    .sup2Content>.imgBox>img:nth-child(1),
    .sup2Content>.imgBox>img:nth-child(3) {
        width: calc(100% / 4);
    }

    .suppo-img {
        flex-direction: column-reverse;
    }

    .suppo-img>img:nth-child(1) {
        width: 100%;
    }

    /* about */
    .ab1>.title {
        width: 90%;
    }

    .ab1>.title>h3>span {
        display: inline;
    }

    .ab1c1 {
        flex-direction: column-reverse;
    }

    .ab1c2 {
        flex-direction: column-reverse;
    }

    .ab1c1>div {
        width: 100% !important;
    }

    .ab1c1>div:nth-child(1) {
        height: 300px;
    }

    .ab1c1>div:nth-child(1)>img {
        transform: translateY(-35%);
    }

    .ab1c2>div:nth-child(1)>img {
        transform: translateY(0%);
    }

    .ab2>div {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 20px;
        place-items: center;
    }

    .ab2>div>img {
        margin: 0;
    }

    .ab1c1>div:nth-child(2)>h4 {
        display: block;
        -webkit-line-clamp: none;
    }

    /* new */
    .newTitle {
        font-size: var(--32px--);
    }

    .newInfo {
        flex-wrap: wrap;
    }

    .newInfo>p {
        margin-bottom: 10px;
    }

    /* pro1 */
    .appCon {
        flex-direction: column-reverse;
    }

    .appCon>.left {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        /* gap: 10px; */
        margin-top: 40px;
    }

    .appCon>.right {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .proContent>.intro {
        flex-direction: column;
    }

    .proContent>.intro>div {
        width: 100% !important;
    }

    .proContent>.Content table tbody {
        overflow-x: scroll;
        display: block;
    }

    .proContent>.Content table tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    .proContent>.Content table tbody::-webkit-scrollbar {
        height: 5px;
    }

    .proContent>.Content table tbody::-webkit-scrollbar-thumb {
        border-radius: 0;
    }

    .SystemIntro>img {
        width: 100%;
    }

    .sup2Content>.imgBox {
        flex-direction: column;
        align-items: center;
    }

    .sup2Content>.imgBox>img:nth-child(1),
    .sup2Content>.imgBox>img:nth-child(3) {
        width: 60%;
        margin: 20px 0;
    }

    .sup2Content>.imgBox>img:nth-child(2) {
        transform: rotate(90deg);
        margin: 0;
    }

    .sup2Content>h3 {
        margin-bottom: clamp(25px, 2.34375vw, 45px);
    }


    .suppo-img>img {
        width: 100% !important;
    }

    .ab1c1>div:nth-child(1)>img {
        height: 100%;
        transform: none;
    }

    .newInfo {
        flex-direction: column;
    }

    .newInfo>p {
        margin-right: 0px !important;
        margin-bottom: 10px;
    }

    .search>.title>h3,
    .search>.title>p {
        display: contents;
    }

    .proNav{
        display: none;
    }
}