/**  公共样式，含 header 、 footer 、   **/

:root {
    --主色:   #03bbe7;
    --主背景: #f8f8f8;
    --边框:   #f1f1f1;
    --字体: #5b5b5b;


    --字体-黑:black;
    --主背景-黑:white;


    --headerHight: 6rem; /* header 高度 */

    --small:  12px;
    --nomel: 14px;
    --big:   22px;
}


@font-face{
    font-family:'siyuan-Regular';
    src:url('https://syllc.oss-cn-shenzhen.aliyuncs.com/ebopark_web/font/SourceHanSansSC-Regular.otf');
}
@font-face{
    font-family:'siyuan-Heavy';
    src:url('https://syllc.oss-cn-shenzhen.aliyuncs.com/ebopark_web/font/SourceHanSansSC-Heavy.otf');
}

html,body{ width: 100%;min-height: 100%;background-color: var(--主背景);font-family: 'siyuan-Regular',SourceHanSansCN-Regular;
    margin: 0;font-size: 14px;
}



body::-webkit-scrollbar {  width: 4px; }   /* 设置滚动条宽度 */
body::-webkit-scrollbar-track {  background-color: #f1f1f1; }  /* 设置轨道背景色 */
body::-webkit-scrollbar-thumb {  background-color: #888;  }  /* 设置滑块背景色 */
body::-webkit-scrollbar-thumb:hover {  background-color: #555;  } /* 设置滑块hover时背景色 */


.form-input-list textarea {font-family: 'siyuan-Regular';}
a{ text-decoration: none; }
.img-show-content canvas { outline: none; }

.icon-pdd{ color: rgb(245,0,8); }

/*隐藏3D模型*/
.model-3D-box{ display: none; }

/*.content-body{ margin-top:var(--headerHight); }*/
.content-width{ margin: auto; }
.content-width-1200{ margin: auto;max-width: 1200px; }
.content-width-1600{ margin: auto;max-width: 1600px;padding: 0 10%; }
.top-60{  margin-top:calc(60px + var(--headerHight)); }



/**  iconfont 配置  **/
.iconfont {  width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}
/**  ————————————  */






/**  公共  **/
.flex{ display: flex;align-items: flex-start; flex-wrap:wrap}
.space-between{ justify-content: space-between; }
.space-around{ justify-content: space-around; }
.flex-center { justify-content: center; }
.align-items-center{ align-items: center; }
.align-items-start{ align-items: flex-start; }
.text-center{ text-align: center; }
.position-relative{ position: relative; }
/**  ————————————  */



/*banner*/
.index-banner{ position: relative; margin: 0;  }
.index-banner img{ width: 100%; height: auto; object-fit: cover; }
.index-banner .img-text{ position: absolute;top: 30%;left: 11%; }
.index-banner .img-text h2 { color: white;font-size: 50px;letter-spacing: 8px;font-weight: 550;}
.index-banner .img-text h4 { color: white;font-size: 22px;font-weight: 500;letter-spacing: 4px;}
.index-banner .img-text button {
    font-size: 16px;letter-spacing: 2px;color: #4349ac;
    font-weight: 500;padding: 10px 40px; cursor: pointer;border: none;margin-top: 30px;
}
.index-banner .center-title-box{ position: absolute;top: 30%;width: 100%;text-align: center; }
.index-banner .center-title-box h2 { color: #266fe7;font-size: 70px;letter-spacing: 20px;font-weight: 550;margin-top: 10px;}
.index-banner .center-title-box h4 { color: white;font-size: 40px;font-weight: 500;letter-spacing: 16px;margin-bottom: 20px;}
.index-banner .img-text p{  color: white;font-size: 15px;font-weight: 500;letter-spacing: 4px;width: 60%;line-height: 30px; }
.index-banner .img-text .call-us-btn{
    background-image: linear-gradient(to right, rgba(38,143,255,1), rgba(38, 154, 255, 0.8)); box-shadow: 0 7px 25px 2px rgba(53, 95, 168, 0.18);
    color: #ffffff;
}
.language-en .index-banner .center-title-box h2{ letter-spacing: 0; }
.language-en .index-banner .center-title-box h4{ letter-spacing: 0; }
    /*end--------banner*/


/*title*/

.index-title-box{ text-align: center;margin-top: 140px;position: relative; }
.index-title-box h4{ font-size: 20px;color: #323232;margin-bottom: 0;letter-spacing: 2px; }
.index-title-box h6{ font-size: 13px;color: #949494;margin-top: 28px;letter-spacing: 2px; padding: 0 10%;}
.index-title-box .bg-txt{
    position: absolute;text-align: center;width: 100%;top:0;font-size: 120px;color: rgb(218 218 218 / 10%);
    letter-spacing: 20px;font-weight: 700;user-select: none;font-family: 'siyuan-Heavy';
}
/***-------***/



/*title*/
.base-img-show-box{ margin: 100px 0;padding: 0 8%;}
.base-img-show-box img:first-child{ width: 80%;height: auto;margin: 0 0 120px 10%; }
.base-img-show-box img{ width: 100%;height: auto; }
.base-img-show-box .list-2:first-child{width: 49%;margin: auto;}
.base-img-show-box .list-2{ width: 49% !important;height: auto;display: inline-block; }
/***-------***/





/*swiper*/
.swiper-container {  width: 100%;  height: auto;  overflow: hidden;position: relative; }
.swiper-wrapper{height: auto!important;}
.swiper-slide {  float: left;  width: 100%;  height: auto!important; }
.swiper-change{ position: absolute;left: 0;top: 20vw;padding: 0 4%;width: 92%;color: white; }
.swiper-change svg{ width: 2rem;height: 2rem;cursor: pointer;padding: .8rem;
    background-color: rgba(179, 179, 179, 0.31);color: white;border-radius: 50%;
}
/*end--------swiper*/




/***梯形swiper组件**/
.trapezoid-content-box{ margin: 80px 0 120px 0; }
.trapezoid-content-box .swiper-container{ width: 60%; }
.trapezoid-content-box{ position: relative; }
.trapezoid-content-box .swiper-slide img{ width: 100%;display: block; }
.trapezoid-content-box .trapezoid-box{
    float: right;height: 0;display: inline-block;
    position: absolute;width: 42%;top: 0;right: 0;
    border-left:100px solid transparent;
    border-right:0 solid transparent;
    border-bottom: 29.95vw solid rgba(9, 145, 240, 0.9);
    color: white;
}
.trapezoid-content-box .swiper-change {  width: 83%; }
.trapezoid-content-box .trapezoid-box h4{margin-top: 11vw;font-size: 20px;margin-left: 60px;letter-spacing: 2px;font-weight: 400;}
.trapezoid-content-box .trapezoid-box p{font-size: 14px;margin-left: 40px;margin-right: 80px;line-height: 30px;letter-spacing: 1px;}
/*end--------*/






/***优势 组件**/
.base-advantage-content{ margin:100px 0;align-items: stretch ; }
.base-advantage-content .advantage-list{
    border-radius: 10px;width: 200px;margin: 1.5vw;text-align: center;
    background-color: rgb(182 214 255 / 30%);  padding: 30px;
}
.base-advantage-content .a-bg{ background-color: rgb(182 214 255 / 30%);}
.base-advantage-content .advantage-list img{ height: 110px;width: auto;margin:10px auto; }
.base-advantage-content .advantage-list h5{ font-size: 16px;margin-top: 0; color: #485681;margin-bottom: 20px;}
.base-advantage-content .advantage-list p{
    font-size: 12px;margin-top: 0;padding: 0 10px;min-height: 60px;line-height: 24px;color: #4b658d;
}
/*end--------*/




/***layout __product 组件**/
.layout-product{ margin: 80px 0;text-align: center; }
.layout-product .layout-product-box{ margin-bottom:  20px ; }
.layout-product .layout-product-box .sy-p-list { width: 20%;margin: 1.5%;position: relative;padding: 0;background-color: rgba(255, 255, 255, 0); }
.layout-product .layout-product-box .sy-p-list div{ position: absolute;top: 50%;text-align: center;width: 100%;color: white;margin-top: -20px;}
.layout-product .layout-product-box .sy-p-list div h4{ margin: 0;font-size: 28px;letter-spacing: 2px;}
.layout-product .layout-product-box .sy-p-list div p{ margin: 5px 0 0;font-size: 12px;}
.layout-product .layout-product-box .sy-p-list img{ width: 100%;height: auto; }
.layout-product a{ padding: 12px 40px;color: white;background-color: #2badff; }
/*end--------*/




/***layout __product 组件**/
/*相关案例*/
.layout-case{ margin: 80px 0;text-align: center; }
.layout-case .layout-case-box{ margin-bottom:  40px ; }
.layout-case .layout-case-box .sy-p-list { width: 25%;margin: 0.5%;position: relative;background-color: white;padding: 0; }
.layout-case .layout-case-box .sy-p-list h4{
    position: absolute;top: 50%;text-align: center;width: 100%;color: white;margin-top: -15px;
    font-size: 20px;letter-spacing: 2px;z-index: 2;
}
.layout-case .layout-case-box .sy-p-list img{ width: 100%;height: auto;display: block; }
.layout-case .layout-case-box .sy-p-list .sy-p-shadow{ width: 100%;height: 100%;position: absolute;top: 0;background-color: rgba(0, 0, 0, 0.49);z-index: 1 }
.layout-case a{ padding: 12px 40px;color: white;background-color: #2badff; }

/*end--------*/















/**  顶部  */
.header{
    display: flex; height: var(--headerHight);; line-height: var(--headerHight);
    position: fixed; top:0; left: 0; z-index: 999; width: 100%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 .6rem #c5c5c5;
}

.header .header-center{ width: 80vw;margin: auto; }
.header .header-center{ width: 80vw;margin: auto; }


.header .logo-box div{ line-height: var(--headerHight); font-size: .9rem;color: #707070;}
.header .logo-img{height: 2.5rem; width: auto;float: left;margin: calc((var(--headerHight) - 2.5rem) / 2) .9rem 0 0;}


.header .header-ul{height: var(--headerHight);; line-height: var(--headerHight); margin: 0 0 0 3.6vw;list-style: none;}
.header .header-ul li{  box-sizing: border-box; text-align: center;margin-right:3rem; }
.header .header-ul li a{ color: var(--字体); font-size: 1.2rem; text-decoration: none;display: block; }
.header .header-ul .nav-activity a{
    color: #0062FF;font-weight: 600;
    text-decoration: underline; /* 开启下划线 */
    text-decoration-color: #0062FF; /* 下划线颜色 */
    text-decoration-thickness: .12rem; /* 下划线粗细 */
    text-underline-offset: .8rem; /* 文字和下划线的距离 */
    text-decoration-style: solid; /* 下划线样式 */
}
.header .header-ul li span{ font-size: 1.2rem; text-decoration: none; cursor: pointer;color: var(--字体);display: block; }

.header .header-ul li svg{ position: absolute;bottom: 0;margin:0 0 -6px -8px;display: none;fill: rgba(255, 255, 255, 0.9);font-size: 20px; }
.header .header-ul .nav-activity svg{ display: inline; }


.header-right {margin-left: 2rem;}
.header-right .tel-number {font-size: 1.1rem;color: #7a7a7a;line-height:var(--headerHight);margin-right: 1rem; }
.header-right .tel-number img{ width: 1.2rem;height: 1.2rem;position: relative;top:.2rem;display: inline-block;right: .2rem; }
.header-right .btn-try {
    display: inline-block;
    padding: .2rem 1.6rem;
    background: #0066FF;
    color: #fff;
    border-radius: 3rem;
    font-size: 1.1rem;
    text-decoration: none;
    height: 2rem;
    line-height: 2rem;
    font-weight: 400;
    margin-top: calc((var(--headerHight) - 2rem) / 2);
}





.header-mobile-menu{ color: white;font-size: 30px;line-height: var(--headerHight);position: absolute;right: 10px; }
.hide-menu{ display: none; }
.header .select-show { color: var(--字体) }


.header .ul-menu-box{
    background-color: rgba(255, 255, 255, 0.97);  border-radius: 1px;
    width: 100%;position: fixed;left: 0;top: var(--headerHight);display: none;
    height: 400px;
}
.header .ul-menu-box .ul-menu-bg{
    height: 400px;width: auto;position: absolute;bottom: 0;background-color: white;z-index: -1;
}
.header .ul-menu-box .menu-box-list{ display: none; }
.header .ul-menu-box .menu-box-content{ margin-left: 250px;margin-right: 120px;}
.header .ul-menu-box .menu-box-list .flex div{ width: 20%;max-width: 220px; }
.header .ul-menu-box .menu-box-list h4{ margin-bottom: 10px;color: #282728;cursor: pointer;font-size: 16px;font-weight: 700;margin-top: 30px; }
.header .ul-menu-box .menu-box-list .h4{ margin-bottom: 10px;color: #282728;cursor: pointer;font-size: 16px;font-weight: 700;margin-top: 36px; }

.header .ul-menu-box .menu-box-list a{ display: block;margin-top:5px;line-height: 30px;color: #282728; }
.header .ul-menu-box .menu-box-list a:hover{color: #0991f0; }
.header .ul-menu-box .menu-box-list .children-activity{color: #0991f0; }

.header .ul-menu-box .menu-box-list .fir-a{ margin-bottom: 8px;cursor: pointer;font-size: 16px;font-weight: 700;margin-top: 25px;}



/*语言切换*/
.header .language-select{position: relative;user-select: none;margin-right: 1rem;}
.header .language-select span{font-size: 1rem;margin: 0 .4rem; }
.header .language-select .en{color: #0a92f0;cursor: pointer;}
.header .language-select .en:hover{font-weight: 600;}
@media screen and (max-width: 1500px) {

    .header .language-select{display: none;}
    /* .about-us-index-body .about-us img{ height: 50vw; } */

}
/**  ————————————  */







/**  产品展示  */
.product-info-body .pro-list{ padding-top: 60px;padding-bottom:30px; }
.product-info-body .img-show-list{ margin: 20px 0; }
.product-info-body .img-show-list div{
    width: 80px;height: 80px;border: 1px solid #d6dbe3;border-radius: 3px;margin: 0 4px 20px 4px;cursor: pointer;
    position: relative;
}
.product-info-body .img-show{ width: 32vw;max-width: 550px; }
.product-info-body .img-show-list .img-active{ border-color: #266fe7; }
.product-info-body .img-show-list div img{ width: 100%;height: 100%; }
.product-info-body .img-show-list div span{ display: inline-block;position: absolute;margin: auto;
    background-color: rgba(230, 234, 239, 0.79);width: 50px;height: 30px;text-align: center;line-height: 30px;left: 15px;top: 25px;
    border-radius: 2px;color: rgba(0, 0, 0, 0.72);
}
.product-info-body .img-show-content{ width: 100%;height: 32vw;max-height: 550px;background-color:#f4f6f8;margin: auto; }
.product-info-body .img-bg-gray{ background-color:#eef2f7; }
.product-info-body .img-show-content img{ width: 100%;height: 100%; }
.product-info-body .model-3D-show{ display: none;width: 100%;height: 100%;background-color: white; }
.product-info-body .device-info h4{ font-size: 22px;padding-top: 10px;color: #242c34;margin-bottom: 18px;letter-spacing: 4px;}
.product-info-body .device-info .device-version{ border-bottom: 1px solid #dde3e9;padding-bottom: 40px; }
.product-info-body .device-info .device-version span{ font-size: 12px;padding:4px 12px;display: inline-block;background-color: #363f4a;
    border-radius: 2px;color: white;
}
.product-info-body .device-info p{ font-size: 16px;margin-top: 18px; }
.device-content{ font-size: 13px;line-height: 28px;letter-spacing: 2px;color: #363f4a;font-family:'siyuan-Regular',SourceHanSansCN-Regular;
    padding: 10px 0 20px 0;width: 70%;
}
.product-info-body .device-label{margin-bottom: 70px;}
.product-info-body .device-label span{ margin-right: 10px;color: #0991f0;font-size: 13px;}
.bg-gray{ background-color: #eef2f7;padding: 20px 0 20px 0;  }
.bg-white{ background-color: #f4f6f8;padding: 20px 0 20px 0; }
.device-info{ width: 41vw;padding: 0 3vw;  margin-top: 10px;max-width: 850px;}
.device-info .iconfont{ font-size: 34px;margin-right: 18px;cursor: pointer; }
/**  ————————————  */

.swiper-product-height {
    height: calc(25vw * (1180 / 1460) + 35px);
}
.swiper-product-width {
    width: 25vw;
}
.swiper-product-img-height {
    width: 100%;
    height: 100%;
}
.swiper-product-img-height img {
    width: 100%;
    height: auto;
}
.product-margin-left {
    margin-left: calc((25vw - 60px) / 2)
}
.swiper-paginations {
    left: calc((25vw - 60px) / 2 - 160px);
}





/***右侧浮动box**/

/* .float-box{  } */
.float-box{ position: fixed; right: 10px;  bottom: 25%;z-index: 20; }
.float-box-scroll { display: inline;; }
.float-box .float-list{
    margin-top: .9rem;position: relative;
    font-size: 1rem;text-align: center;cursor: pointer;
}
.float-box .float-list img{border-radius: 4rem;width: 4rem;height: auto;}
/*.float-box .float-list img:hover{border:1px solid rgb(70,128,246);}*/


.float-box .float-list:first-child{ margin-top: 0; }
.float-box .float-list P{ margin: 4px 0;font-size: 1rem; }

.float-box .float-list svg{
    stroke: #2563EB ;
    overflow: visible !important;
    fill:white;
    width: 100%;height: 100%;
}

.float-box .float-list:hover svg{
    stroke:white !important;
    fill: #2563EB;
}

.float-box .float-list:hover .im-b-box{background-color: #2563EB;}

.float-box .float-list .im-b-box svg{ fill: #2563EB !important;stroke:white!important;; }
.float-box .float-list:hover .im-b-box span{ color: rgb(255, 255, 255);}
.im-b-box{ padding: 1rem; background-color: #2563EB;border-radius: 5rem;border: .1rem solid rgba(100, 116, 139, 0);color: white }

.im-b-box span{display: block;  writing-mode: vertical-rl; text-orientation: upright;text-align: center;font-size: 1.2rem;
    margin: 0 auto .2rem;;letter-spacing: .6rem;color: white;}

.float-box .tel-content{ position: absolute;right: 3rem;top: 1rem; }
.float-box .float-tel-left-content{
    width: 15rem;height: 14rem;margin-top: -8rem;margin-right: 2rem;
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid #eeeeee;
    display: none;
    background-color: white;
}
.float-box .float-tel-left-content svg{width: 4rem;height: 4rem;}
.float-box .float-tel-left-content p{font-size: 1.2rem; color: #64748B;margin: 1rem 0;}
.float-box .float-tel-left-content h6{font-size: 1.8rem; color: #2563EB;margin: 1.2rem 0;letter-spacing: .1rem}
.float-box .float-tel-left-content span{font-size: 1rem; color: #94A3B8;margin: 1rem 0;}


.float-box .im-content{  position: absolute;right: 3rem;top: 1rem;}

.float-box .im-content .im-b{
    width: 15rem;height: 22rem;margin-top: -8rem;margin-right: 2rem;
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid #eeeeee;
    display: block;
    background-color: white;
}


.form-shadow{
    width: 0;  height: 0; display: none; position: fixed;
    top: 0; z-index: 10000; background-color: rgba(0, 0, 0, 0.15);
}
.form-shadow .mqtt {
    height: 500px;
    width: 380px;
    position: fixed;
    bottom: 20px;
    right: 20px;
}
.form-shadow .sub-form{
    width: 320px;height: 460px; background-color: white;
    top: 50%; left: 50%; position: fixed; margin: -230px 0 0 -160px;
    padding: 20px; border-radius: 5px;
}
.form-shadow .sub-form .close-form{ position: absolute; right: 10px; top: 10px; cursor: pointer;font-size: 18px;padding: 6px;}
.form-shadow .sub-form h3{  text-align: center;}
.form-shadow .sub-form p{  font-size: 13px; color: #6a6a6a;}


.form-input-list{padding: 16px 0;}
.form-input-list input{
    width: 95%;border: 1px solid #e6eaef;
    outline: none;padding: 10px; border-radius: 1px;font-size: 14px;
}
.form-input-list textarea{
    width: 95%;  border: 1px solid #e6eaef; outline: none;font-size: 14px;
    padding: 10px; border-radius: 4px;resize:vertical;min-height: 60px;
}
.form-input-list button{
    width: 100%;   color: #ffffff; padding: 10px 0;  font-size: 13px;  letter-spacing: 2px;
    border-radius: 4px; cursor: pointer;border: none;
    background-color: #0991f0;
}

.form-shadow .sub-form .form-input-list{ padding: 8px 0 }

/*****----------******/







/**  底部  */
.footer{ margin: auto;background-color: rgb(7,23,47);padding-top: 40px;color: #ffffff; }
.footer .content-width{ margin: auto;}
.footer .f-abo{ width: 820px; }
.footer .f-abo .width-23{ width: 150px;}
.footer .f-abo .abo-title{ font-size: 16px;margin-bottom: 20px; }
.footer .f-abo .width-23 a{ font-size: 13px;line-height: 30px;margin:0;color: #6a7382;cursor: pointer;display: block; }
.footer .f-abo .width-23 a:hover{ color: var(--主色); }

.footer .calling-us{ width: 250px;}
.footer .calling-us .abo-title{ font-size: 16px;margin-bottom: 30px; }
.footer .calling-us p{ line-height: 40px;color: #6a7382;margin: 0; }
.footer .calling-us .call-num{font-size: 24px;color: #0a92f0; }
.footer .mp-app-download{ width: 500px }
.footer .mp-app-download h2{ font-size: 16px;  margin: 0 0 20px 10px;font-weight: normal;}
.footer .img-box img{  width: 100px;height: 100px;position: relative;left: 50%;margin-left: -50px; }
.footer .img-box p{ margin: auto; font-size: 13px;color: #cacaca;  line-height: 24px;text-align: center;}
.footer .mp-app-download .address{ font-size: 13px;line-height: 30px;color: #6a7382;margin-top: 30px; margin-bottom: 0;white-space: nowrap; }
.footer .mp-app-download .address .map-point{ margin-right: 0; }
.footer .f-bottom{ border-top: 1px solid rgba(172, 172, 172, 0.42);padding: 14px 0;color: #929292; font-size: 13px;}
.footer .f-bottom a{ border: none;color: #929292;text-decoration: none;}
.footer .f-bottom .a-spl{ padding: 0 5px; }
.footer .a-link { margin-top: 20px;color: #6a7382; }
.footer .a-link a{ color: #6a7382;}
.footer .a-more { padding-bottom: 50px; }
.footer .icon-box{ margin-bottom: 20px; display: flex; position: relative; cursor: pointer; }
.footer .icon-box img { width: 30px; height: 30px; margin-right: 10px; }
.footer .icon-box div { height: 30px; line-height: 30px; }
.footer .footer-mp-download-box { display: flex; justify-content: space-around; }
.footer .footer-mp-download-box .mp-app-download { display: flex; flex-direction: column; justify-content: space-between; }
.footer .icon-box .qrcode-box { position: absolute; width: 100px; height: 100px; background-color: #ffffff; padding: 0px; bottom: -110px; display: none; z-index: 99; }
.footer .icon-box:hover::after  { content: ""; position: absolute; bottom: -140px; width: 100px; height: 100px; padding: 10px; z-index: 1; }
.icon-box:hover .qrcode-box { display: block; }
.qrcode-box::after { content: ''; position: absolute; top: -10px; left: 45px; width: 0; height: 0; border-left:10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff; }
.footer .icon-box .qrcode-box img { width: 100%; height: 100%; }
/**  ————————————  */




.layout-call-us .bg-txt{ margin-top: 0;color: #0000001c;z-index: -1; }


#pageList{margin: 20px 0;text-align: center;}