/* 栏目 */
.cata_details {
    text-align: center;
}

.cata_details .crumb {
    margin: 0 0 1%;
}

.cata_details .catede_tit {
    font-size: var(--f48);
    text-align: center;
    color: #000;
    line-height: 133%;
}

.cata_details .catede_sum {
    font-size: var(--f18);
    color: #666666;
    margin: 2% 0;
    text-align: left;
}

.cata_details .maxw {
    max-width: 24rem;
    margin: 0 auto 4%;
}

.catede_bottom {
    margin-top: 5%;
    border-top: 1px solid #d9dce0;
    padding-top: 5%;
}

.catede_bottom .cateb_tit {
    text-align: center;
    font-size: var(--f48);
    color: #010101;
    line-height: 110%;
}

.catede_bottom .cateb_in {
    font-size: var(--f18);
    color: #666666;
    text-align: center;
    margin: 2% 0 4%;
}

.catede_bottom .faq_ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1vw;
    text-align: left;
}

.catede_bottom .faq_ul .list {
    border: 1px solid #dcdfe1;
    padding: 1rem 10rem 1rem 2rem;
    position: relative;
    cursor: pointer;
    width: 100%;
}

.catede_bottom .faq_ul .list .faq_q {
    font-size: var(--f24);
    color: #000000;
    font-weight: 400;
    line-height: 200%;
}

.catede_bottom .faq_ul .list i.icon {
    position: absolute;
    right: 2rem;
    top: 1rem;
    transform: rotate(-90deg);
    transition: all .5s ease;
    width: calc(var(--f24) * 2);
    text-align: center;
}

.catede_bottom .faq_ul .list.cur i.icon {
    transform: rotate(0deg);
}

.catede_bottom .faq_ul .list .faq_a {
    font-size: var(--f18);
    color: #666666;
    font-weight: 400;
    opacity: .6;
    max-height: 0;
    transition: all .5s ease;
    overflow: hidden;
}

.catede_bottom .faq_ul .list.cur .faq_a {
    max-height: 10rem;
}

.cata_details .maxw .Limg_con {
    padding-bottom: 100%;
}

.cata_details img.xq_icon {
    max-width: 100%;
    object-fit: contain;
}

.cata_details .catede_cont {
    margin-top: 5%;
    border-top: 1px solid #d9dce0;
    padding-top: 5%;
    position: relative;
}

.cata_details .catede_cont h3 {
    font-size: var(--f48);
    color: #000;
    line-height: 100%;
    margin-bottom: 3%;
}

.cata_details .catede_cont .proListSwPagin {
    position: absolute;
    left: 0;
    bottom: 0;
}

.catede_proItem {
    background: #fff;
    display: block;
    border-radius: .5rem;
    padding: 10%;
    transition: all .5s ease;
}

a.catede_proItem:hover {
    box-shadow: 0 17px 51px 0 rgba(23, 19, 52, 0.19);
}

.catede_proItem .tit {
    font-size: var(--f24);
    color: #000;
    font-weight: 500;
    display: -webkit-box;
    overflow: hidden;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    line-height: 110%;
    min-height: calc(var(--f24)* 2.3);
}

.catede_proItem .Limg_con {
    padding-bottom: 100%;
}

.catede_proItem .Limg_con img {
    width: 80%;
}

a.catede_proItem:hover img {
    transform: translate(-50%, -50%) scale(1.05);
}

.catede_proItem p {
    display: inline-flex;
    border: 1px solid #616161;
    color: #666666;
    height: 2.63rem;
    align-items: center;
    justify-content: center;
    padding: 0 6%;
    border-radius: .5rem;
    transition: all .5s ease;
    gap: .5rem;
}

a.catede_proItem:hover:hover p {
    background: var(--li);
    color: #fff;
    border-color: var(--li);
}

/* 栏目end */

.banner {
    position: relative;
}

.banner>.info {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}


.banner>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
}

.banner>.info>h3 {
    font-family: 'DIN';
    font-weight: 700;
    line-height: 100%;
    font-size: var(--f60);
    color: #fff;
    margin-bottom: clamp(40px, 5.2083333333333vw, 100px);
}

.crumb>.bread_crumbs>a,
.crumb>.bread_crumbs>i {
    /* color: #fff; */
    color: rgba(255, 255, 255, 0.5);
    transition: color .6s;
}

.crumb>.bread_crumbs>a:hover {
    color: #fff;
}

.crumb>.bread_crumbs>a:last-child {
    color: #fff;
}

.abBox,
.proBox,
.banner>.info,
.appBox,
.wcuBox,
.conBox,
.pro_deBox,
.newDetail>.newDetailBox {
    width: 88%;
    max-width: 1400px;
    margin: 0 auto;
}

.content {
    max-width: max(1700px, 88.5vw);
    width: 94%;
    margin: 0 auto;
}

/* about */
.ab {
    background-color: #fff;
    padding-top: 7rem;
    padding-bottom: 100px;
}

.flex-j-end {
    display: flex;
    justify-content: end;
    flex-wrap: wrap;
}

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

.abBox .bread_crumbs>i {
    color: #e41314;
}

.abBox .bread_crumbs>a {
    font-size: var(--f16);
    color: rgba(0, 0, 0, 0.5);
}

.abBox .bread_crumbs>a:last-child {
    color: #000;
}

.abBox .bread_crumbs>a:hover {
    color: #000;
}

.ab1 .ban_sub {
    color: #000;
    font-family: "DIN";
    letter-spacing: 1px;
    /* border: 2px solid rgba(83, 83, 83, 0.2); */
    display: inline-block;
    line-height: 3.5rem;
    /* padding: 0 2.75rem; */
    border-radius: .5rem;
    /* margin-bottom: 2%; */
    color: #e41314;
}

.ab1>h3 {
    font-family: "DIN";
    font-weight: 900;
    font-size: var(--f60);
    line-height: 117%;
    color: #000;
}

.abBox>hr {
    border-top: 1px solid;
    border-bottom: 0px;
    border-color: rgba(0, 0, 0, 0.1);
    margin: clamp(30px, 2.8645833333333vw, 55px) 0;
}

.skill>.title {
    display: flex;
}

.skill>.title>p {
    width: 50%;
}

.skill>.title>p:first-child {
    font-size: var(--f18);
    color: #000;
    font-weight: 500;
}

.skill>.title>p:last-child {
    font-size: var(--f18);
    color: #666666;
    font-weight: 300;
}

.skill>.imgBox {
    width: 100%;
    border-radius: 10px;
    margin: clamp(40px, 4.1666666667vw, 80px) 0;
    overflow: hidden;
}

.skill>.imgBox>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.skill>.info {
    display: flex;
}

.skill>.info>ul {
    width: 50%;
    display: flex;
    flex-direction: column;
}

.skill>.info>.left {
    /* gap: clamp(30px, 3.125vw, 60px); */
    justify-content: space-around;
}

.skill>.info>.right {
    gap: clamp(20px, 2.083333333333vw, 40px);
}

.skill ul.left .counter {
    color: var(--li);
    font-size: var(--f60);
    display: inline-block;
    line-height: 100%;
}

.skill ul.left p {
    font-size: var(--f18);
    color: #666666;
}

.skill ul.right li {
    font-size: var(--f18);
    color: #666666;
    font-weight: 300;
    line-height: 167%;
}

.abBox>.hr90 {
    margin: clamp(45px, 4.6875vw, 90px) 0;
}

.abBox .honor>h3 {
    font-family: 'DIN';
    font-weight: 700;
    font-size: var(--f60);
    color: #000;
    text-align: center;
    line-height: 100%;
    margin-bottom: clamp(30px, 3.125vw, 60px);
}

/* .honor_swiper {
    padding: 50px !important;
} */

.honor_slide>.imgBox {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.honor_slide>.imgBox>img {
    box-shadow: 0px 7px 20px 0 rgba(19, 80, 109, 0.2);
}

.honor_slide>p {
    width: 79%;
    text-align: center;
    margin: 0 auto;
}

.abBox .honor>.navi {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.abBox .honor>.navi>div {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 0 21px 0 rgba(23, 19, 52, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .6s;
}

.abBox .honor>.navi>div path {
    transition: all .6s;
}

.abBox .honor>.navi>div:hover {
    background-color: #e41314;
}

.abBox .honor>.navi>div:hover path {
    fill: #fff;
}

/* product */
.pro {
    background-color: #f3f6f9;
}

.proBox {
    padding: clamp(50px, 5.2083333333333vw, 100px) 0;
}

.proBox>.title {
    display: flex;
    margin-bottom: clamp(40px, 4.166666667vw, 80px);
}

.proBox>.title>div {
    width: 50%;
}

.proBox>.title>.left>h4 {
    font-size: var(--f48);
    line-height: 70px;
    color: #000;
    margin-bottom: 20px;
}

.proBox>.title>.left>p {
    font-size: var(--f18);
    color: #666666;
    line-height: 30px;
}

.proBox>.title>.right {
    display: flex;
    align-items: start;
    justify-content: end;
}

.proBox>.title>.right>.proSelect {
    width: 60%;
    position: relative;
    display: flex;
    justify-content: end;
}

.proBox>.title>.right>.proSelect::after {
    content: url("/src/icon/arrows.svg");
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-45%) rotate(90deg);
    transform-origin: center 40%;
    transition: transform .6s;
    pointer-events: none;
    cursor: pointer;
}

.proBox>.title>.right>.proSelect:has(select:focus):after {
    transform: translateY(-50%) rotate(0deg);
}

.proBox>.title>.right select {
    width: 100%;
    height: 60px;
    border-radius: 5px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: var(--f16);
    font-weight: 300;
    border: 1px solid #535353;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.proList {
    display: grid;
    align-items: stretch;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.proItem {
    padding: clamp(35px, 3.6458333333333vw, 70px);
    background-color: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transition: box-shadow .6s;
}

.proItem>.imgBox {
    height: clamp(200px, 19.270833333333vw, 370px);
    display: flex;
    align-items: end;
    justify-content: center;
    margin-bottom: 50px;
}

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

.proItem>.info {
    text-align: center;
}

.proItem>.info>h6 {
    font-size: var(--f24);
    font-weight: 500;
    color: #000;
    margin-bottom: 15px;
}

.proItem>.info>p {
    font-size: var(--f18);
    color: #999999;
    transition: color .6s;
}

.proItem:hover {
    box-shadow: 0 17px 51px 0 rgba(23, 19, 52, 0.19);
}

.proItem:hover>.info>p {
    color: #e41314;
}

/* application */
.app {
    background-color: #f3f6f9;
}

.appNav {
    display: flex;
    gap: 50px;
}

.appNav li {
    cursor: pointer;
}

.appNav>li>a {
    display: block;
    width: 100%;
    font-size: var(--f16);
    color: rgba(255, 255, 255, 0.5);
    transition: color .6s;
}

.appNav>li:first-child>a {
    color: #fff;
}

.appNav>li>a:hover {
    color: #fff;
}

.appBox {
    padding: 50px 0;
    overflow: hidden;
}

.appBox>hr {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: clamp(40px, 4.16666667vw, 80px) 0;
}

.appItem {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}

.appBox>.appItem:nth-of-type(even) {
    flex-direction: row-reverse;
}

.appItem>div {
    width: 50%;
}

.appItem>.imgBox {
    height: 480px;
    border-radius: 10px;
    overflow: hidden;
}

.appItem>.imgBox>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.appItem>.info {
    width: calc(50% - clamp(50px, 5.2083333333333vw, 100px))
}

.appItem>.info>h4 {
    font-family: "DIN";
    font-weight: 700;
    font-size: var(--f48);
    line-height: 120%;
    color: #000;
    margin-bottom: 25px;
}

.appItem>.info>p {
    font-size: var(--f18);
    color: #666;
    line-height: 167%;
    /* margin-bottom: clamp(35px, 3.645833333333vw, 70px); */
}

.appItem>.info>h6 {
    font-family: "DIN";
    font-weight: 700;
    font-size: var(--f18);
    color: #000;
    margin-bottom: 20px;
}

.appItem>.info>div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.appItem>.info>div>a {
    padding: 10px 20px;
    border-radius: 50px;
    background-color: #fff;
    color: #000;
    font-size: var(--f16);
    transition: background-color .6s, color .6s;
}

.appItem>.info>div>a:hover {
    color: #fff;
    background-color: #e41314;
}

/* wcu */
.advantage {
    padding: clamp(40px, 5.2083333333333vw, 100px) 0;
}

.ad1 {
    display: flex;
    justify-content: space-between;
    margin-bottom: clamp(50px, 7.8125vw, 150px);
}

.ad1>.imgBox {
    width: 50%;
    border-radius: 10px;
    overflow: hidden;
}

.ad1>.imgBox>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ad1>.info {
    width: calc(50% - clamp(40px, 6.25vw, 120px));
}

h6.wcuTi6 {
    font-size: var(--f16);
    color: #e41314;
    text-transform: uppercase;
    margin-bottom: clamp(10px, 1.0416666667vw, 20px);
}

h4.wcuTi4 {
    font-size: var(--f30);
    color: #000;
    line-height: 120%;
    font-weight: 500;
}

.ad1>.info>h4 {
    margin-bottom: clamp(10px, 1.0416666667vw, 20px);
}

.ad1>.info>p {
    font-size: var(--f18);
    color: #666666;
    line-height: 167%;
}

.ad1>.info>p:nth-of-type(1) {
    margin-bottom: clamp(30px, 2.604166666667vw, 50px);
    color: #000;
}

.ad2 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ad2 .wcuTi4 {
    text-align: center;
    margin-bottom: clamp(40px, 4.166666667vw, 80px);
}

.ad2>h5 {
    font-size: var(--f24);
    line-height: 30px;
    color: #000;
    text-align: center;
    margin-bottom: clamp(15px, 1.3020833333333vw, 25px);
}

.ad2>p {
    font-size: var(--f18);
    line-height: 167%;
    text-align: center;
    margin-bottom: clamp(30px, 3.125vw, 60px);
}

.certificates {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.certificates>li {
    border: 1px solid #e2e2e2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
}

.certificates>li>img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.standard {
    background-color: #f3f6f9;
    padding: clamp(40px, 5.2083333333333vw, 100px) 0;
}

.standard>.wcuBox {
    display: flex;
    justify-content: space-between;
}

.standard>.wcuBox>div {
    width: calc(50% - clamp(25px, 2.604166666667vw, 50px));
}

.sta {
    display: flex;
    flex-direction: column;
}

.sta:nth-of-type(2) {
    flex-direction: column-reverse;
}

.sta>.info>.wcuTi4 {
    margin-bottom: clamp(20px, 2.0833333333vw, 40px);
}

.sta>.info>p {
    font-size: var(--f18);
    line-height: 167%;
    color: #666666;
    margin-bottom: clamp(40px, 5.2083333333333vw, 100px);
}

.sta>.imgBox {
    border-radius: 10px;
    overflow: hidden;
}

.sta:nth-child(2) {
    gap: 80px;
}

.sta:nth-of-type(2)>.info>p {
    margin-bottom: 0;
}

.partner {
    margin: clamp(40px, 5.2083333333333vw, 100px) 0;
}

.partner>.wcuBox {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.partner>.wcuBox>h4 {
    text-align: center;
    margin-bottom: clamp(40px, 4.166666667vw, 80px);
}

.par {
    width: 100%;
    display: grid;
    align-items: center;
    grid-template-columns: repeat(5, 1fr);
}

.par>a {
    max-width: 100%;
    padding: 0 20px;
}

.par a:nth-of-type(3) {
    display: block;
    width: 100%;
    text-align: center;
    padding-right: 35px;
}

/* 新闻 */
.newBox {
    background-color: #f3f6f9;
    padding: clamp(40px, 5.2083333333333vw, 100px) 0;
}

.newNav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    margin-bottom: clamp(40px, 3.645833333333vw, 70px);
}

.newNav>a {
    font-family: "DIN";
    font-weight: 700;
    font-size: var(--f30);
    color: #000;
    line-height: 233%;
    position: relative;
}

.newNav>a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #e41314;
    transition: width .6s;
}

.newNav>a:hover:before {
    width: 100%;
}

.newNav>a.active {
    color: #e41314;
}

.newNav>a.active::before {
    width: 100%;
}

.newList {
    display: grid;
    align-items: stretch;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.newItem {
    border: 1px solid #e8e8e7;
    border-radius: 10px;
    padding: 10px;
    background-color: #fff;
}

.newItem>.imgBox {
    height: 250px;
    border-radius: 10px;
    overflow: hidden;
}

.newItem>.imgBox>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.newItem {
    display: flex;
    flex-direction: column;
    transition: box-shadow .6s;
}

.newItem>.info {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(40px, 4.1666666667vw, 80px);
}

.newItem>.info>p:nth-child(1) {
    font-size: 15px;
    color: #999;
}

.newItem>.info>p:nth-child(1)>span {
    font-weight: 500;
    color: #000;
}

.newItem>.info>p:nth-child(2) {
    font-size: clamp(19px, 1.09375vw, 21px);
    color: #000;
    transition: color .6s;
}

.newItem:hover {
    box-shadow: 0 9px 35px 0 rgba(0, 47, 57, 0.2);
}

.newItem:hover>.info>p:last-child {
    color: #e41314;
}

/* contact */
.con {
    padding: clamp(40px, 5.2083333333333vw, 100px) 0;
}

.conBox>.title {
    margin-bottom: clamp(35px, 3.645833333333vw, 70px);
}

.conBox>.title>p {
    font-family: "DIN";
    font-weight: 700;
    font-size: var(--f16);
    color: #000;
    text-align: center;
    margin-bottom: 15px;
}

.conBox>.title>h4 {
    font-weight: 500;
    font-size: var(--f42);
    line-height: 114%;
    text-align: center;
    color: #000;
}

.conBox>.info {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.conBox>.info>div {
    background-color: #fff;
    border: 1px solid #e1e1e1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
}

.conBox>.info>div>.imgBox {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.conBox>.info>div>p {
    font-size: var(--f16);
    font-weight: 500;
    color: #000;
    margin-bottom: clamp(25px, 2.60416666667vw, 50px);
}

.conBox>.info>div>.part {
    display: flex;
    gap: clamp(10px, 1.3020833333333vw, 25px);
    align-items: stretch;
    justify-content: center;
}

.conBox>.info>div>.part>div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.conBox>.info>div>.part>.line {
    width: 1px;
    height: 100%;
    background: linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 75%, transparent 100%);
}

.conBox>.info>div>.part a {
    font-weight: 700;
    color: #000;
    font-size: var(--f18);
}

.conBox>.info>div>.part>div>p {
    font-size: 14px;
    color: #666666;
}

.conBox>.info>div>.part>p {
    text-align: center;
    font-weight: var(--f18);
    color: #000;
}

.conBox>.map {
    width: 100%;
    height: clamp(300px, 31.25vw, 600px);
    background-color: #fff;
}

.conBox>.map>iframe {
    width: 100%;
    height: 100%;
}

.conBox>hr {
    margin: clamp(45px, 4.4270833333333vw, 85px) 0;
    border: 0;
    border-top: 1px dashed rgba(0, 78, 160, 0.15);
}

.messageBox>h4 {
    font-size: var(--f36);
    font-weight: 700;
    color: #000;
    line-height: 150%;
    margin-bottom: clamp(25px, 2.6041666666667vw, 50px);
}

form {
    width: 100%;
    /* display: flex; */
    position: relative;
}

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

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

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

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

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

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

.messageBox>form>.row>.column>div>p,
.messageBox>form>.row>.column>p {
    font-size: var(--f16);
    color: #000;
    /* margin-bottom: 10px; */
    position: absolute;
    top: 18px;
    left: 10px;
    padding: 0 10px;
    /* background-color: #fff; */
    transition: top .3s, font-size .3s;
    z-index: 3;
    color: #666;
    pointer-events: none;
    /* mix-blend-mode: multiply; */
}

.messageBox>form>.row>.column>div>p::before,
.messageBox>form>.row>.column>p::before {
    content: '';
    width: 84%;
    height: 10px;
    top: 45%;
    left: 50%;
    position: absolute;
    background-color: #fff;
    z-index: -1;
    transform: translateX(-50%);
}

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

.messageBox>form input,
.messageBox>form>.row>.column>textarea {
    font-size: var(--f18);
    border: 1px solid #d4dde1;
    border-radius: 5px;
    transition: all .6s;
    padding: 15px 20px;
    overflow: hidden;
    box-shadow: -3px 5px 10px 0 rgba(22, 23, 71, 0.05);
    /* mix-blend-mode: multiply; */
}

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

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

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

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

.messageBox>form>.submitBox {
    /* justify-content: center; */
    margin-top: clamp(40px, 4.166666666667vw, 80px);
}

.messageBox button {
    width: 200px;
    height: clamp(60px, 3.645833333333vw, 70px);
    border: 1px solid transparent;
    /* background-color: #0d161e; */
    background-color: #121a38;
    border: 1px solid #000;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: all .6s;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
}

.messageBox button:hover {
    background-color: transparent;
    color: #e41314;
    border-color: #121a38;
}

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

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

.messageBox>form>.row>.column>div>div>input {
    width: calc(100% - 251px);
    margin-right: 20px;
}

.messageBox>form>.row>.column>div>div>div {
    display: flex;
    align-items: center;
    width: 231px;
}

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

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

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

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

.messageBox>form>.row>.column,
.messageBox>form>.row>.column>div {
    position: relative;
}

/* .messageBox>form>.row>.column>div>p {
    position: absolute;
    top: 18px;
    left: 20px;
    background-color: #fff;
    transition: top .3s;
}

.messageBox>form>.row>.column>p {
    position: absolute;
    top: 18px;
    left: 20px;
    background-color: #fff;
    transition: top .3s;
} */

.messageBox>form input,
.messageBox>form>.row>.column>textarea {
    padding: 20px;
    background-color: #fff;
}

.messageBox>form>.row>.column>div:focus-within>p:first-of-type,
.messageBox>form>.row>.column>div:has(input:not(:placeholder-shown))>p:first-of-type,
.messageBox>form>.row>.message:focus-within>p:first-of-type,
.messageBox>form>.row>.message:has(input:not(:placeholder-shown))>p:first-of-type {
    top: -12px;
    font-size: var(--14px--);
}

input:-internal-autofill-selected {
    box-shadow: inset 0 0 0 1000px #fff !important;
    -webkit-text-fill-color: #000;
}

/* product detail */
.pro_de {
    padding-top: 7rem;
    background-color: #f3f6f9;
    padding-bottom: clamp(40px, 5.2083333333333vw, 100px);
}

.pro_deBox .bread_crumbs>i {
    color: #e41314;
}

.pro_deBox .bread_crumbs>a {
    font-size: var(--f16);
    color: rgba(0, 0, 0, 0.5);
}

.pro_deBox .bread_crumbs>a:last-child {
    color: #000;
}

.pro_deBox .bread_crumbs>a:hover {
    color: #000;
}

.pro_d1 {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.proImgBox {
    width: calc(50% - clamp(40px, 5.2083333333333vw, 100px));
}

.pro_d1Info {
    width: 50%;
}

.bPic {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #fff;
    margin-bottom: 15px;
}

.bPic .swiper-slide {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: clamp(30px, 4.1666666667vw, 80px);
}

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

.proThumbs {
    height: 100px;
}

.proThumbs .swiper-slide {
    /* max-width: 100px; */
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background-color: #fff;
    box-sizing: content-box;
    transition: border .6s;
    cursor: pointer;
}

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

.proThumbs .swiper-slide.swiper-slide-thumb-active {
    border: 1px solid #515150;
}

.pro_d1Info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px 0 15px 0;
}

.pro_d1Info>.info>h2 {
    font-family: "DIN";
    font-weight: 700;
    font-size: var(--f48);
    line-height: 100%;
    color: #000;
    margin-bottom: clamp(20px, 2.0833333333vw, 40px);
}

.pro_d1Info>.info>p {
    font-size: var(--f18);
    color: #666;
    line-height: 30px;
}

.pro_d1Info>.handOff>p {
    font-size: var(--f18);
    line-height: 36px;
    color: #000;
}

.pro_d1Info>.handOff>p>a {
    color: #aaa;
    text-decoration: underline;
    transition: color .6s;
}

.pro_d1Info>.handOff>p>a:hover {
    color: #e41314;
}

.pro_deBox>hr {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: clamp(40px, 4.1666666667vw, 80px) 0;
}

.pro_content {
    position: relative;
    overflow: hidden;
    margin-bottom: clamp(35px, 3.645833333333vw, 70px);
}

.pro_content h3,
.applica>h3,
.recom>h3 {
    font-weight: 500;
    font-size: var(--f24);
    line-height: 150%;
    color: #000;
    margin-bottom: clamp(15px, 1.5625vw, 30px);
}

.pro_content ul li {
    list-style: square;
    list-style-position: inside;
    font-size: var(--f18);
    line-height: 30px;
}

.pro_content ul li::marker {
    color: #e41314;
}

.applica {
    margin-bottom: clamp(40px, 5.2083333333333vw, 100px);
}

.applica_swiper .swiper-wrapper {
    align-items: stretch;
}

.applica_swiper .swiper-slide {
    min-height: 100%;
    height: auto !important;
    display: flex !important;
    flex-direction: column;
}

.applica_swiper .swiper-slide>.imgBox {
    flex: 1;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.applica_swiper .swiper-slide>.imgBox>img {
    width: 100%;
    height: 100%;
    max-height: 290px;
    object-fit: cover;
    object-position: center;
}

.applica_swiper .swiper-slide>p {
    font-size: var(--f18);
    color: #000;
    text-align: center;
}

.applicaPagin {
    margin-top: 20px;
}

.proList_sw {
    padding-bottom: 65px !important;
}

.proList_sw .swiper-wrapper {
    align-items: stretch;
}

.proList_sw .swiper-slide {
    height: auto !important;
    min-height: 100%;
}

.proList_sw .proItem {
    height: 100%;
}

/* newDetail */
.newDetail {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 30px 0;
}

.newTitle {
    font-size: var(--f36);
    color: #000;
    text-align: center;
    line-height: 150%;
    margin: 20px 0;
}

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

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

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

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



.newContent {
    font-size: 1rem;
    line-height: 150%;
    color: #333;
    font-weight: 300;
    margin: 3% 0;
}

.newContent iframe {
    width: 100%;
    aspect-ratio: 2 / 1;
}

.newContent table td,
.newContent table th {
    border: 1px solid #ccc;
    padding: 5px;
}

.newContent table {
    border-collapse: collapse;
    margin-bottom: .5rem;
}

.newContent h2 {
    font-size: var(--f24);
    margin: 1rem 0 .8rem;
}

.newContent h3 {
    font-size: var(--f18);
    margin: 1.5rem 0 .5rem;
}

.newContent ol,
.newContent ul {
    padding-inline-start: var(--f24);
}

.newContent li {
    list-style-type: disc;
    margin: 0.25rem 0;
}

.newContent ol li {
    list-style-type: decimal;
}

.newContent img {
    max-width: 100% !important;
    height: auto !important;
}

.newContent a {
    color: initial;
}

.newContent a:hover {
    color: var(--li);
}




.NPage {
    margin: 20px 0;
}

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

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

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

/* 下载 */
.down_top {
    background: #f1f3f5;
    margin-top: 6rem;
    padding: 3% 0;
    border-bottom: 1px solid #cecece;
}

.down_top .flex {
    align-items: center;
}

.down_top img {
    max-width: 10rem;
}

.down_top .down_txt {
    width: calc(100% - 10rem);
    padding-left: 2rem;
}


.down_top .down_txt .tit {
    font-size: var(--f36);
    color: #333;
    margin-bottom: 1%;
    line-height: 133%;
}

.down_top .down_txt p {
    font-size: var(--f18);
    color: #747474;
}

.down_bottom {
    padding: 3% 0 5%;
}

.down_bottom .down_ul {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem 4rem;
}

.down_bottom .down_ul li {
    width: calc((100% - 4rem) / 2);
    border-bottom: 1px solid #ccc;
    padding: 1rem;
}

.down_bottom .down_ul li p.L_tit {
    font-size: var(--f24);
    color: #333;
    font-weight: 500;
    width: calc(100% - 6rem);
}

.down_bottom .down_ul li span {
    font-size: var(--f18);
    color: #666;
    text-transform: capitalize;
}

@media (max-width: 1520px) {
    .skill>.title>p:last-child>br {
        display: none;
    }
}

@media (max-width: 1200px) {
    .par {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 20px;
    }

    .newList {
        grid-template-columns: repeat(3, 1fr);
    }

    .conBox>.info>div>.part {
        flex-direction: column;
    }

    .conBox>.info>div>.part>div:nth-of-type(2) {
        display: none;
    }


    .messageBox>form>.row>.column>div>div>div>img {
        width: 50%;
        height: 100%;
        object-fit: contain;
    }

    .verifyBox {
        overflow: hidden;
    }

}

@media (max-width:890px) {

    .ad2 .wcuTi4>br,
    .ad2>p>br {
        display: none;
    }
}

@media (max-width:768px) {

    .abBox,
    .proBox,
    .banner>.info,
    .appBox,
    .wcuBox,
    .conBox,
    .pro_deBox,
    .newDetail>.newDetailBox {
        width: 94%;
        max-width: 1400px;
        margin: 0 auto;
    }

    .appBox>hr {
        display: none;
    }

    .appBox {
        padding: 50px 0 1px;
    }

    .banner {
        margin-top: 70px;
    }

    .ab1>h3,
    .abBox .honor>h3 {
        font-size: 24px;
    }

    .ab1>h3>br {
        display: none;
    }

    .honor_swiper {
        padding: 0px !important;
    }

    .skill>.imgBox {
        height: 350px;
    }

    .skill>.imgBox>img {
        object-fit: cover;
    }

    .proBox>.title {
        flex-direction: column;
        gap: 20px;
    }

    .proList {
        grid-template-columns: repeat(2, 1fr);
    }

    .proBox>.title>div {
        width: 100%;
    }

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

    .proImgBox {
        width: 55%;
    }

    .pro_d1Info {
        width: 100%;
    }

    .proThumbs {
        height: auto;
    }

    .proThumbs .swiper-slide {
        aspect-ratio: 1 / 1;
    }

    .appNav {
        display: none;
    }

    .appItem {
        flex-direction: column !important;
        gap: 20px;
        margin-bottom: 50px;
    }

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

    .appItem>.info>h4 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .appItem>.info>p {
        font-size: 14px;
        margin: 0;
    }

    .appItem>.imgBox {
        height: 350px;
        overflow: hidden;
    }

    .ad1 {
        flex-direction: column-reverse;
        gap: 30px;
    }

    .ad1>.info,
    .ad1>.imgBox {
        width: 100%;
    }

    .ad1>.info>p:nth-of-type(1) {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .ad1>.info>p {
        font-size: 14px;
    }

    .standard,
    .advantage {
        padding: 50px 0;
    }

    .ad2>p {
        font-size: 14px;
        margin: 0;
    }

    .sta>.info>.wcuTi4 {
        margin-bottom: 10px;
    }

    .sta>.info>p {
        font-size: 14px;
        margin-bottom: 30px;
    }

    .certificates {
        grid-template-columns: repeat(3, 1fr);
    }

    .standard>.wcuBox {
        flex-direction: column;
        gap: 50px;
    }

    .standard>.wcuBox>div {
        width: 100%;
        flex-direction: column !important;
    }

    .sta>.imgBox {
        height: 300px;
    }

    .sta>.imgBox>img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center bottom;
    }

    .sta:nth-child(2) {
        gap: 40px;
    }

    .newList {
        grid-template-columns: repeat(2, 1fr);
    }

    .conBox>.info {
        grid-template-columns: 1fr;
    }

    .conBox>.info>div>.part {
        flex-direction: row;
    }

    .conBox>.info>div>.part>div:nth-of-type(2) {
        display: block;
    }

    .conBox>.info>div>.part {
        gap: 30px;
    }

    .messageBox>form>.row {
        flex-direction: column;
    }

    .messageBox>form>.row>.column {
        width: 100% !important;
    }

    .messageBox>form>.row>.column:first-child {
        margin-bottom: 20px;
    }

    .messageBox>form>.row>.column>textarea {
        height: 200px;
    }

    .messageBox>form>.submitBox {
        align-items: center;
    }

    .messageBox button {
        height: 60px;
    }

    .skill>.info {
        flex-direction: column-reverse;
    }

    .skill>.info>ul {
        width: 100%;
    }

    .skill>.info>.right {
        margin-bottom: 20px;
    }

    .skill ul.right li {
        font-size: 14px;
    }

    .skill>.info>.left {
        gap: clamp(30px, 3.125vw, 60px);
    }

    .flex-j-end {
        justify-content: flex-start;
        margin-bottom: 10px;
    }

    .catede_bottom,
    .cata_details .catede_cont {
        margin-top: 50px;
        padding-top: 50px;
    }



    .catede_bottom .faq_ul .list {
        padding: 15px;
    }

    .catede_bottom .faq_ul .list i.icon {
        display: none;
    }

    .catede_bottom .faq_ul .list .faq_q {
        font-size: 16px;
        line-height: 167%;
    }

    .catede_bottom .faq_ul .list .faq_a {
        font-size: 14px;
        opacity: 1;
        background: #eee;
        padding: 10px;
        margin-top: 10px;
        max-height: fit-content;
    }

    .cata_details .catede_cont h3 {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .catede_proItem {
        padding: 20px;
    }

    .newTitle {

        font-size: 24px;

        line-height: 133%;

        margin-top: 0;
    }

    .newDetail {
        padding: 50px 0;
    }

    .con {

        padding: 50px 0;
    }

    .conBox>.title>h4 {
        font-size: 24px;
    }

    .down_top {
        margin-top: 70px;
        padding: 50px 0;
    }

    .down_top .down_txt p br {
        display: none;
    }

    .down_bottom {
        padding: 30px 0 50px;
    }

    .down_bottom .down_ul {
        gap: 20px 0;
    }

    .down_bottom .down_ul li {
        width: 100%;
        padding: 1rem 0;
    }

    .down_bottom .down_ul li p.L_tit {
        font-size: 16px;
    }
}

@media (max-width:480px) {
    .banner {
        height: 60vw;
    }

    .banner>.info>h3 {
        font-size: 36px;
    }

    .ab,
    .pro_de {
        padding-bottom: 50px;
    }

    .skill>.title {
        flex-direction: column;
        gap: 10px;
    }

    .skill>.title>p {
        width: 100%;
    }

    .skill>.title>p:last-child {
        font-size: 14px;
    }

    .proBox>.title>.right>.proSelect {
        width: 80%;
    }

    .proBox>.title>.left>h4 {
        margin-bottom: 0;
    }

    .proList {
        grid-template-columns: 1fr;
    }

    .proImgBox {
        width: 100%;
    }

    .proItem>.imgBox {
        margin-bottom: 25px;
    }

    .proList_sw {
        padding-bottom: 55px !important;
    }

    .par {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 20px;
    }

    .newList {
        grid-template-columns: 1fr;
    }

    .conBox>.info>div>.part {
        flex-direction: column;
        gap: 5px;
    }

    .conBox>.info>div>.part:nth-child(2) {
        display: none;
    }

    .verifyBox {
        flex-wrap: wrap;
    }

    .messageBox>form>.row>.column>div>div>input {
        margin-right: 10px;
        margin-bottom: 0;
        width: calc(100% - 160px);
    }

    .messageBox>form>.row>.column>div>div>div>img {
        flex: 0;
    }

    .messageBox>form>.row>.column>div:not(:last-child) {
        margin-bottom: 15px;
    }

    .messageBox>form>.row>.column>div>div>div>img {
        width: auto;
        margin: 0;
    }

    .messageBox>form>.row>.column>div>div>div>svg {
        display: none;
    }

    .messageBox>form>.row>.column>div>div>div {
        display: flex;
        align-items: center;
        width: 150px;
        height: 60px;
        background: #fff;
        border: 1px solid #d4dde1;
        border-radius: 5px;
    }
}