/*
 *  respon.css by 453883682@qq.com
 */
@media (max-width:1600px) {
    .box1-more{ width: 100px; line-height: 30px;}
    .box1-btn{ width: 150px; line-height: 44px;}
    .box2-tab{ padding: .6rem 0;}
    .box5-img{ height: 160px;}
    .box5-list2 li{ height: 160px;}
    .box5-list2 li:nth-child(3){ height: 200px;}
    .AI4-text{ max-height: 7.1rem;}
    .ParaCloud2-title{ line-height: 1.4; margin: 0 0 .1rem;}
    .ParaCloud2-con h4{ line-height: 1.4; margin: 5px 0;}
    .ParaCloud2-con p{ margin: 2px 0;}

    .sci-sign-list .layui-form-radio *{ font-size: 16px;}
    .sci-sign-list .layui-form-radio > i{ font-size: 16px;}

    .join4-con p::before{ top: 13px;}
}
@media (max-width:1400px) {
    .HPC5-title{ margin-top: calc(26px + .15rem);}
    .AI4-text{ max-height: 8rem;}
    .CAX-detail-h2{ font-size: 18px;}
    .CAX-detail-h2 span::after{ height: 6px; max-height: .06rem;}
    .CAX-detail-list li{ margin-bottom: .15rem;}

    .sci-sign-lable{ min-width: 100px;}
    .sci-sign-list .layui-form-radio *{ font-size: 14px;}
    .sci-sign-list .layui-form-radio > i{ font-size: 14px;}

}
@media (max-width:1200px) {
    .banner{ height: 80vh; max-height: 6rem;}
    .ban-swiper{ top: 60px; height: 80vh; max-height: 6rem; top: 0;}
    .ban-text{ padding-top: 0;}
    .ban-tit{ font-size: .36rem; line-height: 1.4; margin-bottom: .3rem;}
    .box1-bg{ padding: .4rem 0;}
    .box1-list{ margin: 0 -.1rem;}
    .box1-list li{ padding: .1rem;}
    .box1-link{ padding: .1rem .2rem;}
    .box1-title{ margin: .1rem 0;}
    .box1-con{ margin: .1rem 0 .2rem;}
    .box1-icon{ width: 90px; height: 90px;}
    .box2-bg{ padding: .4rem 0 .3rem;}
    .box2-tab{ padding: .3rem 0;}
    .box2-tab li{ margin: .1rem 0; padding: .1rem .15rem .1rem .2rem;}
    .box2-tab li img{ max-width: 20px;}
    .box2-right{ padding: .3rem;}
    .box2-title{ margin: .15rem 0;}
    .box2-con{ margin: .2rem 0;}
    .box2-line{ margin: .3rem 0;}
    .box3-bg{ padding: .2rem 0 .4rem;}
    .box3-text{ margin: .2rem 0;}
    .box3-list li{ margin-top: 0;}
    .box4-top{ padding: .3rem 0 0;}
    .box4-tab li{ padding: 0 .4rem;}
    .box4-tab li span{ padding: 0 .06rem .12rem;}
    .box4-tab li span::before{ height: 3px;}
    .box4-tab li.active i{ width: 20px; height: 15px;}
    .box4-bot{ padding: .3rem 0 15px;}
    .box4-swiper{ margin: .1rem 0;}
    .box4-swiper .swiper-slide{ max-width: 1.64rem; max-height: .82rem;}
    .box4-bot .box-more{ margin: .3rem auto;}
    .box5-bg{ padding: .3rem 0 0;}
    .box5-box{ display: block; margin: .3rem 0;}
    .box5-left{ width: 100%; margin: .2rem 0;}
    .box5-img{ position: relative; height: 0; padding-bottom: 62.15%; overflow: hidden;;}
    .box5-img img{ position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
    .box5-right{ width: 100%;}
    .box5-list2 li{ height: auto;}
    .box5-list2 li:nth-child(1) .box5-img2{ padding-bottom: 57.14%;}
    .box5-list2 li:nth-child(2) .box5-img2{ padding-bottom: 88.49%;}
    .box5-list2 li:nth-child(3){ height: auto;}
    .box5-img2{ position: relative; height: 0; padding-bottom: 43.62%; overflow: hidden;}
    .box5-img2 img{ position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
    .box5-bg .box-more{ margin: .3rem auto;}
    .box6-bg{ padding: .3rem 0;}
    .box5-box{ margin: .2rem 0;}
    .box5-item{ min-height: 5rem;}
    .box5-type,
    .box5-name,
    .box5-item .box5-con,
    .box5-more{ margin: .1rem 0;}
    .box5-type{ line-height: calc(20px + .14rem);}
    .box5-btn .container{ width: 90%;}

    .HPC-bg{ padding: .4rem 0;}
    .HPC1-list{ margin: 0 -.1rem;}
    .HPC1-list li{ padding: .1rem;}
    .HPC1-item{ padding: .2rem .3rem;}
    .HPC1-icon{ width: 60px; height: 60px; margin-right: .2rem;}
    .HPC2-list{ margin: .3rem 0;}
    .HPC2-list li{ padding: .1rem 0;}
    .HPC2-item{ padding: .2rem .3rem;}
    .HPC2-icon{ width: 60px; height: 60px; margin: .15rem auto !important;}
    .HPC2-title{ margin: .15rem auto;}
    .HPC2-con{ margin: .15rem auto !important;}
    .HPC3-top{ margin: .2rem auto;}
    .HPC3-bot{ margin: .3rem auto;}
    .HPC3-table{ line-height: 1.4;}
    .HPC3-table th,
    .HPC3-table td{ padding: .15rem;}
    .HPC4-box{ margin: 0 -.1rem;}
    .HPC4-item{ padding: 0 .1rem;}
    .HPC4-list{ margin: 0 -.1rem;}
    .HPC4-list li{ padding: 0 .1rem;}
    .HPC4-link{ padding: .2rem;}
    .HPC4-img{ width: 60px; height: 60px; margin: .2rem auto;}
    .HPC4-title{ margin: .2rem auto;}
    .HPC4-btn{ line-height: calc(24px + .15rem); margin: .2rem auto;}
    .HPC5-swiper .swiper-container{ margin: 0 -.1rem; padding: .1rem 0;}
    .HPC5-swiper .swiper-slide{ padding: 0 .1rem;}
    .HPC5-link{ padding: 0 .15rem;}
    .HPC5-text{ margin: .2rem auto .3rem;}

    .AI1-video{ margin: 0 auto .5rem;}
    .AI1-box{ padding: .3rem; margin: .3rem 0;}
    .AI1-left{ padding: .3rem;}
    .AI2-swiper{ margin: 0;}
    .AI2-link{ padding: .3rem .2rem;}
    .AI2-icon{ width: 64px; height: 64px; margin: .15rem auto;}
    .AI2-title{ margin: .15rem auto;}
    .AI2-con{ margin: .15rem 0;}
    .AI3-list{ margin: 0 -.1rem;}
    .AI3-item{ padding: .2rem;}
    .AI3-icon{ width: 80px; height: 80px; margin-right: .2rem;}
    .AI4-tab{ margin: .3rem 0;}
    .AI4-text{ padding: .3rem; max-height: 5.4rem;}
    .AI4-list{ margin: 0 -.1rem;}
    .AI4-list li{ padding: .1rem;}
    .AI4-item hr{ margin: .2rem 0;}

    /* .CAX3-img{ width: 52%;} */
    .CAX-des{ margin: .3rem auto;}
    .CAX-img{ margin: .3rem auto;}
    .CAX3-list li{ margin: .3rem 0;}
    .CAX3-icon{ width: 90px; height: 90px;}
    .CAX3-title{ margin: 0 0 .1rem;}
    .cax3-con{ padding: 0; padding-right: .1rem; margin-right: -.1rem;}
    .iframe-title{ padding: .1rem 0;}

    /* DevOps */
    .DevOps1-item{ padding: .2rem .3rem;}
    .DevOps1-icon{ width: 90px; height: 120px;}
    .DevOps2-hover{ padding: .2rem;}

    /* intelligent */
    .intelligent1-item{ padding: 1px .2rem .1rem;}
    .intelligent1-icon{ width: 76px; height: 76px;}
    .intelligent1-text{ margin: .3rem auto;}
    .intelligent2-bg .DevOps1-icon{ width: 80px; height: 80px;}
    .intelligent4-box{ margin: .3rem auto}
    .intelligent5-box{ display: block; margin: .3rem 0;}
    .intelligent5-left{ width: 100%; text-align: center;}
    .intelligent5-left img{ width: auto; max-width: 60%;}
    .intelligent5-arrow{ position: absolute; top: auto; left: 0; right: 0; width: 100%; margin: .3rem 0; transform: rotate(90deg) translateY(-50%); transform-origin: center top; text-align: center;}
    .intelligent5-arrow img{ width: 26px; max-width: .3rem;}
    .intelligent5-right{ margin-top: .4rem;}
    .intelligent5-top-item{ padding: .1rem .15rem;}
    .intelligent5-bot-list li{ padding: 0 .15rem;}

    /* ParaCloud */
    .ParaCloud1-swiper{ margin: .3rem 0;}
    .ParaCloud1-title{ padding: .1rem;}
    .ParaCloud2-box{ margin: .3rem 0;}

    /* Application */
    .Application3-box{ margin: 0;}

    /* solution-bio */
    .bio1-swiper .swiper-slide{ flex: none; width: 25%;}
    .bio1-icon{ width: 140px; height: 140px;}
    .bio2-box{ margin: .3rem 0;}
    .bio2-top .swiper-slide{ padding: .1rem; height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    .bio2-img .img-bg{ min-height: 3.6rem;}
    .bio2-info{ padding: .2rem .3rem;}
    .bio2-con{ margin: .2rem 0 .3rem;}
    .bio3-swiper{ height: auto; max-height: none;}
    .bio3-swiper .swiper-slide{ width: 50%; padding: 0 2px;}
    .bio3-img{ position: relative; padding-bottom: 75%; overflow: hidden;}
    .bio3-img .img-bg{ position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
    .bio3-icon{ margin: 0 auto .1rem;}
    .bio4-swiper{ margin: .3rem 0; padding: 0 .1rem;}
    .bio4-mask{ height: 100%;}
    .bio4-title{ padding: .2rem; display: none;}
    .bio4-hover{ display: none;}
    .bio4-text{ padding: .2rem .3rem;}
    .bio4-name{ margin: .1rem 0;}
    .bio4-con{ margin: .1rem 0 .2rem; -webkit-line-clamp: 2;}
    .bio4-more{ width: 110px; line-height: 36px; margin: .1rem 0 0;}
    .bio4-name,
    .bio4-con,
    .bio4-more{ opacity: 1; visibility: visible; transform: translateY(0);}    
    .bio4-prev{ left: -.2rem;}
    .bio4-next{ right: -.2rem;}
    .bio5-bg .box-title-des{ margin: .2rem auto;}

    .metoc1-list li{ margin: .2rem 0;}
    .metoc1-icon{ width: 40px; height: 40px; margin-right: .2rem;}
    .metoc2-text{ margin: .3rem .5rem;}
    .metoc2-icon{ width: 50px; height: 50px;}
    .metoc3-item{ padding: .2rem .3rem; align-items: flex-start;}
    .metoc3-icon{ width: 50px; height: 50px; margin-right: .2rem;}
    .metoc4-box{ margin: .3rem 0;}
    .metoc4-list li:nth-child(2n){ transform: translateY(70%);}

    .SaaS3-swiper{ margin: .3rem 0; padding: .3rem;}
    .SaaS3-swiper .SaaS3-prev,
    .SaaS3-swiper .SaaS3-next{ width: 40px; height: 40px;}
    .SaaS3-douhao-left,
    .SaaS3-douhao-right{ max-width: 32px; max-height: 32px;}
    .SaaS3-text{ padding: .2rem .3rem;}
    .SaaS3-con{ margin: .2rem 0;}

    .IM1-item{ padding: .2rem;}
    .IM1-img{ margin-right: .2rem;}
    .IM2-top{ margin: .3rem -.1rem;}
    .IM2-top li{ padding: .1rem;}
    .IM2-top-item{ padding: .1rem;}
    .IM2-img{ margin: 0 0 .1rem;}
    .IM2-bot{ margin: 0 -.2rem;}
    .IM2-bot > li{ padding: 0 .2rem .2rem;}
    .IM2-bot > li::after{ width: 22px; height: 32px;}
    .IM2-bot .IM2-top{ padding: 0;}
    .IM2-bot .IM2-top li{ padding: 0 .1rem;}
    .IM6-list{ margin: .3rem -.1rem;}
    .IM6-list li{ padding: .1rem;}

    .case-bg{ padding: .3rem 0;}
    .case-left{ float: none; position: static; width: 100%; max-width: 100%; margin: 0 auto;}
    .case-button{ display: block; width: fit-content; background: linear-gradient(360deg, #FBFCFF 0%, #E8EDF6 100%); border: 2px solid #FFFFFF; padding: 10px; font-weight: normal; cursor: pointer; box-shadow: 0px 6px 6px rgba(5,33,88,0.12); border-radius: 50%; margin: 0 0 5px 5px; display: none;}
    .case-sort{ display: flex; flex-wrap: wrap; justify-content: center; padding: .08rem; background: #FBFBFE; border-radius: 4px;}
    .case-sort li{ padding: 5px 2px;}
    .case-sort li a{ padding: 5px .1rem;}
    .case-sort li a img{ width: 24px; margin-right: .1rem;}
    .case-list{ margin: .2rem -.1rem;}
    .case-list li{ padding: 0 .1rem; margin-bottom: 0; margin-top: .2rem;}
    .case-text{ padding: .2rem;}
    .case-con{ display: none;}
    .case-more{ max-height: none;}
    .case-link:hover .case-img::before{ height: 50%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);}
    .case-link:hover .case-text{ top: auto; bottom: 0; display: block;}

    .case1-box{ margin: .2rem 0;}
    .case5-list{ margin: 0 -.1rem;}
    .case5-list li{ padding: .1rem;}
    .case5-link{ border-radius: .1rem;}
    .case5-title{ padding: .1rem .2rem;}

    .news-link{ padding: .2rem 0;}
    .news-img{ width: 40%; max-width: 260px; max-height: 160px; margin-left: 2%;}
    .news-title{ margin: .1rem 0;}
    .news-con{ height: 44px; line-height: 22px; margin: .1rem 0 .2rem;}
    .news-more{ line-height: 32px; padding: 0 .15rem;}

    .news-left{ padding: .2rem 0;}
    .news-top{ padding-right: .3rem;}
    .news-left-title{ margin: .2rem 0;}
    .news-left-time{ margin: .2rem 0; background-size: 16px auto;}
    .news-bot{ padding: .3rem 0; padding-right: .3rem;}
    .news-back{ padding: 0 .15rem; line-height: 34px;}
    .news-back i{ width: 18px; height: 14px;}
    .news-right{ padding: .2rem 0; padding-left: .3rem;}
    .news-right-title{ margin: .2rem 0;}
    .news-hot-list li{ margin-bottom: .2rem;}
    .news-hot-img{ margin-bottom: .1rem;}
    .news-hot-time{ background-size: 14px auto; padding-left: 20px;}

    .sci1-box{ min-height: 0;}
    .sci1-img{ width: 200px; margin: 0 0 .3rem;}
    .sci2-box{ min-height: 0; width: 55%;}
    .sci2-img{ max-width: 50%; width: 300px; margin: .2rem auto;}
    .sci2-text{ margin: .2rem 0;}
    .sci3-box{ margin: 0;}
    .sci3-img{ width: 100%; border-radius: .1rem .1rem 0 0;}
    .sci3-text{ position: static; width: 100%; border-radius: 0 0 .1rem .1rem;}
    .sci3-scroll{ height: auto; padding: 0; overflow: hidden;}
    .sci3-btn{ padding-left: 24px;}
    .sci4-tab{ margin: .3rem auto; line-height: 24px;}
    .sci4-tab li a,
    .sci4-tab li span{ padding: .08rem 0.15rem;}
    .sci4-list{ margin: 0 -.1rem;}
    .sci4-list li{ padding: 0 .1rem; margin-bottom: .2rem;}
    .sci4-top{ padding: .15rem;}
    .sci4-bot{ padding: .15rem;}
    .sci4-bot a{ line-height: 32px; padding: 0 .15rem; min-width: 1rem;}
    .sci5-list{ margin: 0 -.1rem;}
    .sci5-list li{ padding: 0 .1rem; margin-bottom: .2rem;}
    .sci5-text{ margin: .15rem;}
    .sci-pop-top{ padding-top: 50px;}
    .sci-pop-td{ margin: .1rem -.1rem;}
    .sci-pop-td span{ padding: 0 .1rem;}
    .sci-pop-bot{ padding: .3rem;}
    .sci-pop-tips{ margin: .1rem 0;}
    .sci-pop-btn{ margin: .1rem 0;}
    .sci-pop-btn a,
    .sci-pop-btn span{ min-width: 1.44rem; line-height: 24px; margin: 0 .1rem;}

    .a-prev,
    .a-next{ width: 40px; height: 40px;}
    .a-prev.gray,
    .a-next.gray{ width: 40px; height: 40px; max-width: .6rem; max-height: .6rem;}
    .a1-bg{ padding: .4rem 0;}
    .a1-box{ margin: .3rem 0;}
    .a1-logo{ margin: 0 0 .2rem;}
    .a1-logo img{ height: 40px;}
    .a1-text{ max-height: 2.44rem;}
    .a2-img{ display: none;}
    .a2-box{ width: 100%; max-width: 100%;}
    .a2-box .a-title{ text-align: center;}
    .a3-bg{ padding: .3rem 0;}
    .a3-tab{ padding: 0 40px; margin: 0 0 .3rem;}
    .a3-tab .swiper-slide{ padding: 0;}
    .a3-box{ max-width: 100%; padding: .3rem; margin: .3rem auto;}
    .a3-title{ margin: .2rem 0;}
    .a3-text{ margin: .2rem 0;}
    .a3-con p{ padding-left: 18px; background-size: 14px auto; background-position: left 7px;}
    .a4-swiper .swiper-container{ width: calc(100% + .2rem); margin: 0 -.1rem; padding: .1rem 0;}
    .a4-swiper .swiper-slide{ padding: 0 .1rem;}
    .a4-bg .HPC5-link{ padding-top: .15rem;}
    .a5-item{ padding: .2rem;}
    .a5-icon{ width: 54px; height: 54px;}
    .a5-title{ margin: .1rem 0;}
    .a5-con{ margin: .15rem 0 0;}

    .join1-bg{ padding: .3rem 0;}
    .join1-item{ padding: .2rem; min-height: 1.6rem;}
    .join1-icon{ width: 40px; height: 40px;}
    .join2-list{ margin: .3rem 0;}
    .join2-top::after{ width: 14px; height: 16px;}
    .join2-icon{ width: 64px; height: 64px;}
    .join3-top{ padding: .15rem 0;}
    .join-name{ padding: 0 .2rem;}
    .join-handle{ padding: 0 .2rem;}
    .join3-text{ padding: 10px .3rem;}
    .join2-bg{ padding: .3rem 0;}
    .join2-swiper{ margin: .3rem 0;}
    .join2-swiper .swiper-slide{ width: 60%; max-width: none;}
    .join2-prev{ left: calc(20% - 80px);}
    .join2-next{ right: calc(20% - 80px);}
    .join4-list{ margin: .2rem -.1rem;}
    .join4-list li{ padding: .1rem;}
    .join4-title{ padding: .15rem;}
    .join4-con{ padding: .3rem;}
    .join5-swiper .bio4-con{ margin: .1rem 0;}
    .join5-prev{ left: -.2rem;}
    .join5-next{ right: -.2rem;}
    
    .con-top{ padding: .5rem; margin: .6rem 0;}
    .con-left{ padding: .3rem;}
    .con-tel{ margin: .2rem 0; background-size: 20px auto; padding-left: 30px; line-height: 20px;}
    .con-text{ margin: .2rem 0;}
    .con-wx{ margin: .2rem 0;}
    .con-wx-img{ max-width: 100px; margin-right: .2rem;}
    .map-logo{ width: 200px; max-width: 3.4rem;}

    .con-list{ margin: .2rem -.1rem .6rem;}
    .con-list li{ padding: .1rem;}
    .con-city{ width: 90px; min-height: .9rem;}
    .con-address{ padding: .2rem;}
}
@media (max-width:991px) {
    .box1-box{ flex-wrap: wrap; flex-direction: column-reverse;}
    .box1-list li{ animation-name: fadeInUp;}
    .box1-right{ width: 100%; max-width: 100%;}
    .box1-left{ width: 100%; margin: .1rem 0; padding: 0;}
    .box1-btn{ width: 140px; height: 38px; line-height: 38px; font-size: 14px; margin: .1rem;}
    .box2-box{ display: block;}
    .box2-tab{ display: flex; flex-wrap: wrap; justify-content: center; width: 100%; padding: 0;}
    .box2-tab li{ flex: 1; max-width: 30px; padding: 10px .1rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0 5px; text-align: center;}
    .box2-tab li.active{ max-width: 200px;}
    .box2-tab li::before{ height: 2px; top: auto; bottom: 0; left: 50%;}
    .box2-tab li.active::before{ width: 100%; left: 0; top: auto; bottom: 0;}
    .box2-img{ top: 46px; height: auto; bottom: 0;}
    .box2-right{ width: 100%; max-width: 100%; margin-left: 0;}
    .box2-right::before{ background: linear-gradient(to right,#0F0F33 0%, rgba(15, 15, 51, 0) 100%);}
    .box2-logo{ max-width: 400px;}
    .box3-bg{ background-position: left bottom; background-size: 145% auto;}
    .box3-box{ flex-direction: column-reverse;}
    .box3-left{ display: flex; flex-direction: column; width: 100%; max-width: 100%; margin: .3rem auto 0;}
    .box3-left .box-more{ order: 2; margin: .1rem auto 0;}
    .box3-right{ margin-left: auto; width: 100%; margin-right: -.3rem;}

    .HPC1-item{ align-items: flex-start;}
    .AI1-box{ flex-direction: column-reverse; padding: .2rem !important;}
    .AI1-box::before{ width: 100%;}
    .AI1-right{ max-height: none; padding: .15rem;}
    .AI1-left{ width: 100%; max-width: 100%; max-height: none;}
    .AI4-item{ padding: 0;}
    .AI4-img{ position: static; width: 100%; height: 2rem; display: none;}
    .AI4-text{ max-height: none;}

    .CAX3-img{ position: absolute; top: 0; left: 0; right: 0; width: 100%; margin: 0 auto; display: none;}
    .CAX3-img::before{ opacity: .1;}
    .CAX3-img img{ opacity: .5;}
    .CAX3-list{ position: relative; left: 0; top: 0; transform: none; display: block;}
    .CAX3-list li{ width: 100%; margin: .1rem 0;}
    .CAX3-item{ position: relative; flex-direction: row !important; padding: .1rem .15rem; background: linear-gradient(180deg, #EFF2F9 0%, #FFFFFF 100%); border: 2px dotted #B8BCC7; border-radius: .1rem; cursor: pointer;}
    .CAX3-item::after{ flex-shrink: 0; display: block; content: "\e65e"; font-family: "iconfont" !important; transition: all .3s;}
    .CAX3-icon{ width: 40px; height: 40px; max-width: .6rem; max-height: .6rem; margin: 0 !important;}
    .CAX3-text{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-align: left !important; margin: 0 !important; margin-left: .15rem !important;}
    .CAX3-list li:nth-child(2n + 1) .CAX3-text{ margin-left: .15rem !important;}
    .CAX3-hover{ position: static; transform: none; opacity: 1; visibility: visible; transition: none; width: 100%; max-width: 100%; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: .4rem; margin-top: -.2rem; display: none;}
    .CAX3-title{ text-align: left; display: none;}
    .CAX3-item.open::after{ transform: rotate(180deg);}
    .CAX-detail{ font-size: 14px;}

    .DevOps2-list{ height: 340px;}
    .DevOps2-text{ padding: .1rem;}
    .DevOps2-icon{ width: 54px; height: 54px; margin: 0 auto;}

    .intelligent4-box{ display: block;}
    .intelligent4-left{ width: 100%; max-width: 100%;}
    .intelligent4-item{ padding: .2rem .3rem;}
    .intelligent4-right{ width: 100%; margin-top: .5rem; text-align: center;}
    .intelligent4-right img{ width: auto; max-width: 100%;}
    
    .ParaCloud2-box{ display: block;}
    .ParaCloud2-img{ width: 100%; padding: .2rem; border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
    .ParaCloud2-img img{ min-height: 0;}
    .ParaCloud2-text{ width: 100%; min-height: 0; margin: 0 !important; padding: .3rem !important; border-top-left-radius: 0; border-top-right-radius: 0;}

    .bio1-swiper .swiper-slide{ flex: none; width: 33.33%;}
    .bio4-more{ width: 100px; line-height: 30px; font-size: 12px;}
    .bio4-more i{ width: 12px; height: 12px;}

    .metoc1-list{ display: block;}
    .metoc2-box{ display: block;}
    .metoc2-tab{ display: none;}
    .metoc2-text{ max-width: none; margin: .2rem;}
    .metoc2-swiper .swiper-container{ border-radius: .1rem;}
    .metoc2-list li{ align-items: flex-start;}
    .metoc4-item{ line-height: 1.6;}
    .metoc4-img{ opacity: .5; max-width: 50%; height: 100%;}
    .metoc4-img img{ width: 100%; height: 100%; object-fit: contain;}
    .metoc4-list{ display: block; min-height: 0;}
    .metoc4-list li{ width: 100%; margin: .1rem 0 !important; transform: none !important;}
    .metoc4-item{ max-width: 100%;}

    .IM1-item{ display: block;}
    .IM1-img{ width: 50%; margin: 0 auto .2rem;}
    .IM1-title{ text-align: center;}
    .IM2-top li{ width: 33.33%;}
    .IM6-list li{ width: 20%;}

    .case1-box{ flex-direction: column-reverse;}
    .case1-left{ max-width: 100%; width: 100%;}
    .case1-left .CAX-detail-h2{ margin-top: .3rem;}
    .case1-swiper{ width: 100%; margin: 0 auto;}

    .news-box{ display: block;}
    .news-left{ width: 100%; border: none;}
    .news-top{ padding: 0;}
    .news-bot{ padding: .2rem 0;}
    .news-right{ padding: 0;}

    .news-hot-list{ display: flex; flex-wrap: wrap; margin: .2rem -.1rem;}
    .news-hot-list li{ width: 50%; padding: 0 .1rem;}
    .news-hot-list li:nth-child(3){ display: none;}
    .news-hot-title{ height: 44px; line-height: 22px; -webkit-line-clamp: 2;}

    .sci4-list li{ width: 50%;}
    .sci4-bot{ justify-content: center;}
    .sci5-list{ justify-content: center;}
    .sci5-list li{ width: 33.33%;}

    .a1-box{ display: block;}
    .a1-left{ max-width: 100%; width: 100%;}
    .a1-text{ padding: 0; max-height: none; margin: .2rem 0;}
    .a1-right{ width: 100%; margin: .2rem auto;}
    
    .con-top{ display: block; padding: .2rem;}
    .con-top::before{ height: 55%; width: 100%;}
    .con-left{ width: 100%; margin: 0 0 5px; border-radius: .1rem .1rem 0 0;}
    .con-right{ height: 400px; max-height: 5rem; border-radius: 0 0 .1rem .1rem;}

    .sci-sign{ display: block;}
    .sci-sign-left{ position: relative; width: 100%; max-width: none; z-index: 1;}
    .sci-sign-img{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index:  -1;}
    .sci-sign-text{ position: static;}
    .sci-sign-logo{ width: 200px;}
    .sci-sign-form{ margin: .3rem auto;}

    .join4-list li{ width: 100%;}
    .join4-icon{ width: 80px; max-width: 15%; bottom: .1rem; right: .1rem;}
}
@media (max-width:767px) {
    .box5-btn .container{ width: 100%;}
    .box5-prev{ right: auto; left: 5px;}
    .box5-next{ left: auto; right: 5px;}
    .HPC1-list li{ width: 100%;}
    .HPC1-title{ font-size: 16px;}
    .HPC1-con{ font-size: 14px;}
    .HPC4-box{ display: block;}
    .HPC4-item{ width: 100%;}
    .AI3-list li{ width: 100%;}
    
    .CAX-detail-icon{ width: 54px; height: 54px; margin-right: .1rem;}

    .DevOps1-list li{ width: 100%;}
    .DevOps2-list{ display: block; height: auto; max-height: none; margin: .3rem -1px;}
    .DevOps2-list li{ width: 100%; height: auto; padding: 1px;}
    .DevOps2-item{ height: auto;}
    .DevOps2-img{ height: 0; padding-bottom: 51.68%;}
    .DevOps2-img .img-bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
    .DevOps2-img::after{ opacity: 0;}
    .DevOps2-text{ display: none;}
    .DevOps2-hover{ opacity: 1; visibility: visible; transform: translateY(0);}
    .DevOps2-hover::before{ opacity: .9;}

    .intelligent5-top-list li{ width: 50%;}
    .intelligent5-top-list li:nth-child(2n)::before{ display: none;}
    .intelligent5-bot-list{ padding: .2rem;}

    .Application3-box{ display: block;}
    .Application3-img{ width: 100%; margin: .2rem auto;}
    .Application3-text{ width: 100%; max-width: 100%; margin: .2rem auto; text-align: center;}

    .bio1-swiper .swiper-slide{ flex: none; width: 50%;}
    .bio2-top{ display: none;}
    .bio2-item{ display: block;}
    .bio2-img{ width: 100%;}
    .bio2-img .img-bg{ min-height: 0; height: 0; padding-bottom: 66.67%;}
    .bio2-text{ width: 100%; padding: .2rem 0;}
    .bio2-bot .swiper-pagination{ display: block;}
    .bio4-pop-img{ float: none; position: static; width: 100%; max-width: 100%; margin: 0 auto .2rem;}
    .bio4-more{ margin: .1rem 0;}
    .bio5-list li{ width: 50%;}

    .metoc3-list li{ width: 100%;}

    .SaaS3-item{ display: block;}
    .SaaS3-img{ width: 100%;}

    .IM1-bot{ display: block;}
    .IM1-type{ min-width: 0; min-height: 0; margin: .1rem 0; padding: .1rem;}
    .IM1-type br{ display: none;}
    .IM1-con{ display: flex; flex-wrap: wrap; justify-content: center;}
    .IM1-con p{ float: none;}
    .IM2-bot{ display: block;}
    .IM2-bot > li{ width: 100%;}
    .IM2-bot > li::after{ position: static; left: 0; right: 0; top: 100%; margin: .1rem auto 0; animation: none; transform: rotate(90deg);}
    .IM6-list li{ width: 25%;}
    
    .case5-list li{ width: 100%;}

    .sci1-box{ display: block; width: 100%; max-width: 100%; padding: .3rem; background-color: rgba(255, 255, 255, 0.5); border-radius: .1rem;}
    .sci1-img{ max-width: 40%; margin: .2rem auto;}
    .sci1-text{ margin: .2rem 0;}
    .sci2-bg{ padding: .3rem 0;}
    .sci2-box{ width: 100%; max-width: 100%; padding: .3rem; background-color: rgba(0, 0, 0, 0.5); border-radius: .1rem;}    
    .sci4-tab{ width: 100%; margin: .3rem auto; line-height: 24px; overflow-x: auto; white-space: nowrap;}
    .sci4-tab li{ flex: auto;}

    .a2-logo{ float: none; width: 50%; margin: 0 auto .2rem;}
    .a2-text{ max-height: none; padding: 0; overflow: hidden;}
    .a3-dot{ width: 20px; height: 20px; border-width: 3px;}
    
    .join2-list{ justify-content: center;}
    .join2-list li{ width: 33.33%;}
    .join2-list li:nth-child(3) .join2-top::after{ display: none;}
    .join-year,
    .join-level{ display: none;}
    .join3-price{ margin: .15rem 0;}
    .join3-hidden{ display: block;}
    .join3-text h4{ margin: .2rem 0 .1rem;}
    .join3-bot p{ padding-left: 20px; background-size: 14px auto !important; background-position: left 6px !important;}
    .join2-swiper .swiper-slide{ width: 80%; max-width: none;}
    .join2-prev{ left: .1rem;}
    .join2-next{ right: .1rem;}

    .con-list li{ width: 100%;}
}
@media (max-width:640px) {
    .banner{ height: 100vh; max-height: none;}
    .ban-swiper{ top: 50px; height: 100vh; max-height: none; top: 0;}
    .ban-img .img-bg{ display: none;}
    .ban-img .mobile{ display: block;}
    .ban-tit{ font-size: .4rem;}
    .box1-con{ height: 4.8em; -webkit-line-clamp: 3;}
    .box4-swiper .swiper-slide{ max-width: 2rem; max-height: 1.2rem;}

    .HPC2-list{ display: block;}
    .HPC2-list li{ flex: none;}
    .AI2-title{ font-size: 16px;}
    .AI3-title{ font-size: 16px;}
    .AI4-list li{ width: 100%;}
    .AI4-name{ font-size: 16px; line-height: 20px;}
    .AI4-name img{ height: 20px;}
    
    .CAX-detail-h2{ font-size: 16px;}
    .CAX5-title{ font-size: 16px;}
    .CAX-detail-list li{ width: 100%; max-width: 100%; align-items: flex-start;}

    .intelligent5-bot-list li{ width: 100%; padding: .1rem; display: flex; align-items: center;}
    .intelligent5-icon{ flex-shrink: 0; max-width: .6rem; max-height: .6rem; margin: 0; margin-right: .2rem;}
    .intelligent5-con{ flex: auto; line-height: 1.6; margin: .2rem 0; text-align: left; overflow: hidden;}

    .case-title{ font-size: 14px;}

    .news-link{ align-items: normal;}
    .news-text{ display: flex; flex-direction: column; justify-content: space-between;}
    .news-title{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: initial;}
    .news-con{ display: none;}

    .news-bot{ display: block;}
    .news-back{ margin: .2rem auto 0;}
    
    .sci4-list li{ width: 100%;}
    .sci4-title{ font-size: 14px;}
    .sci4-time{ padding-left: 16px; background-size: 12px auto;}
    .sci4-bot a{ line-height: 28px;}
    .sci5-list li{ width: 50%;}
    .sci5-tag{ font-size: 12px; bottom: .1rem; padding: 0 .15rem; line-height: 28px;}
    .sci5-img{ width: 90%;}

    .a3-box::before,
    .a3-box::after{ display: none;}
    .a3-year{ line-height: 1;}
    .a3-con{ height: auto;}

}
@media (max-width:460px) {
    .box1-bg{ background-size: 300% auto; background-position: 20% center; z-index: 1;}
    .box1-bg::before{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; content: ""; background: linear-gradient(to bottom right, rgba(255,255,255,0.8) 50%, transparent 100%, transparent 100%); z-index: -1;}
    .box1-video video{ width: 200%;}
    .box1-video::before{ background: linear-gradient(to bottom right, rgba(255,255,255,0.8) 50%, transparent 100%, transparent 100%);}
    .box1-more{ width: 80px; line-height: 24px; font-size: 12px;}
    .box3-list li{ width: 50%;}
    .box4-tab li{ padding: 0; flex: 1;}
    .box5-left{ padding: .2rem;}
    .box5-list{ margin: 0 -.15rem;}
    .box5-list li{ padding: 0 .15rem;}
    .box5-con{ height: auto; display: none;}
    .box5-info .see{ display: none;}
    .box5-name{ font-size: .36rem; -webkit-line-clamp: 3;}

    .HPC3-table td{ font-size: 12px;}
    .iframe-title{ font-size: .36rem;}
    .DevOps2-name img{ max-width: .36rem;}
    .intelligent4-title{ font-size: 16px;}
    .intelligent5-title{ font-size: 16px;}
    .ParaCloud2-title{ font-size: 18px;}
    .ParaCloud2-con h4{ font-size: 16px;}

    .bio1-title{ font-size: 14px;}
    .bio4-text{ padding: .2rem .5rem;}
    .bio5-list li{ width: 100%;}
    
    .IM6-list li{ width: 33.33%;}

    .case-list li{ width: 100%;}

    .news-link{ padding: .3rem 0;}
    .news-img{ max-height: 120px; height: 2.1rem;}
    .news-title{ font-size: 15px;}
    .news-more{ font-size: 12px; line-height: 28px;}
    
    .sci3-btn{ padding-left: 0; justify-content: center;}
    .sci-sign-list li{ display: block;}
    .sci-sign-list li:last-child .sci-sign-lable{ display: none;}
    .sci-sign-lable{ display: block; line-height: 1.6; margin-bottom: 5px;}
    .sci-sign-btn{ margin: 0 auto;}

    .join2-title{ font-size: 14px;}
    .join2-en{ font-size: 12px;}
    .join2-swiper .swiper-slide{ width: 90%;}
    .join2-swiper .swiper-pagination{ display: block;}
    .join2-prev,
    .join2-next{ display: none;}    

    .con-title{ font-size: 18px;}

    .CAX-detail-info{ display: block;}
    .CAX-detail-info .line{ width: 100%; height: 1px; min-height: 0; margin: .3rem 0;}
    .CAX-detail-info .right{ text-align: center;}
    .CAX-circle-list{ flex-wrap: wrap;}
    .CAX-circle-list li{ width: 50%;}
}

@media (min-width:992px) {
    .CAX3-hover{ display: flex !important;}
}
@media (min-width:1200px) {
    html{ font-size: 65px !important;}
}
@media (min-width:1400px) {
    html{ font-size: 80px !important;}
}
@media (min-width:1600px) {
    html{ font-size: 100px !important;}
}