@charset 'utf-8';
ul, li, ol { list-style: none; margin: 0; padding: 0; } dl, dt, dd { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; } li img, dt img, dd img { vertical-align: top; }
img { border: 0; } form { margin: 0; padding: 0; }
a { cursor:pointer; outline: none; }
* { box-sizing: border-box; text-decoration: none;  }

html,body { height: 100%;}


:root { --app-height: 100%; }

html,body { padding: 0; margin: 0; /*overflow: hidden;*/ width: 100vw; height: 100vh; height: var(--app-height); }


body { padding: 0; margin: 0; font-family: "Noto Sans SC", Helvetica, arial, sans-serif; background: url("../images/bgsp.jpg") top center/cover no-repeat fixed; /*max-height: 100vh;*/ /*overflow: hidden; */  }


.container {margin-left: auto; margin-right: auto;}

.flex_center { display: flex; align-items: flex-start; justify-content: center;}


.wrapper{overflow: hidden; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1vmin; /*padding: 0 0 5% 0;*/ }


/*.logo,.website,.zright,.zleft,.btn_1,.btn_2,.btn_3 {border: #ffb142 1px solid;}*/

.logo { width: auto; height: 10%; margin: 2% auto 0 auto;}
.logo img { width: auto; height: 100%;}


.website { width: 50%; height: auto; margin: 2% auto 0 auto; }
.website img { width: 100%; height: 100%;}
/*.website { width: auto; height: 3.5%; margin: 3% auto 0 auto; }
.website img { width: auto; height: 100%;}*/


.zright { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 51%; margin: 0 auto; }

.swiper { width: 100%; height: 100%; margin: 0 auto;  }

.swiper-slide { text-align: center; display: flex; justify-content: center; align-items: center;}

.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: contain; position: absolute; bottom: 25px; padding-top: 25px;  }




.zleft { display: flex; justify-content: center; flex-direction: column; width: 100%; margin: 0 auto; height:22%; /*gap:5%;*/ }

.btn_1 { background: url(../images/menu01.png) no-repeat center center; background-size: contain; position: relative; cursor: pointer;}
.btn_2 { background: url(../images/menu02.png) no-repeat center center; background-size: contain; position: relative; cursor: pointer;}   
.btn_3 { background: url(../images/menu03.png) no-repeat center center; background-size: contain; position: relative; cursor: pointer;}   
.btn_1,.btn_2,.btn_3 { width: 100%; max-width: 546px; /*height:100%; */height: calc(100% / 3); display: flex; margin: 1% auto; }



.jsBox { width: 100%; position: absolute; left: 0; top: 0; display: none; transform: translateY(-100%); -webkit-transform: translateY(-100%); z-index: 999;}

.jsBox ul { margin: 0 0.2rem; padding: 0.3rem 0.35rem 0.13rem; border: 1px solid #00A7FF; background: #F0FAFF;}

.jsBox p { font-family: 'STHeiti', 'Microsoft YaHei', Helvetica, Arial, sans-serif; font-size: 1em; font-weight: bolder; color: #0091ff; text-align: center; height: auto; margin-bottom: 0.1rem; }

.jsBox li { margin-bottom: 0.17rem; overflow: hidden; zoom: 1; clear: both;}

.jsBox li span { display: block; float: left; color: #264555; font-size: 0.25rem; line-height: 0.5rem; text-align: center; white-space: nowrap; border: 1px solid #AFC3DE; background: #fff; }

.jsBox li .ms { width: 1.4rem;}

.jsBox li>img { margin: 0.18rem 0.17rem 0 0.17rem; width: 0.45rem; display: block; float: left; }

.jsBox li .url { padding: 0 0.2rem; width: 4.5rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.jsBox li a { width: 1.54rem; display: block; float: right; color: #fff; font-size: 0.28rem; line-height: 0.54rem; text-align: center; background: url(../images/btn_bg.png) no-repeat; background-size: 100% 100%; }

.jsBox .arrow { margin-left: -0.22rem; width: 0.3rem; position: absolute; left: 50%; bottom: -0.15rem; }



.dlBox { position: absolute; left: 50%; top: 0; display: none; transform: translateY(-100%); -webkit-transform: translateY(-100%); z-index: 999; margin-left: -95px;}   
.btn_2:hover .dlBox { display: block; }     
.dlBox .arrow { margin-left: -0.22rem; width: 0.3rem; position: absolute; left: 50%; bottom: -0.15rem;} 
.dlBox ul { margin: 0 0.2rem; padding: 0.3rem 0.35rem 0.13rem; border: 1px solid #00A7FF; background: #F0FAFF;}    
.dlBox li { border-bottom: 1px solid #DCDCDC;  }  
.dlBox li:nth-of-type(4) { border-bottom: 0px solid #DCDCDC;  } 
    
    
.service-btn, .download-btn { padding: 15px 10px 15px 40px; font-size: 13px; cursor: pointer; overflow: hidden; white-space: nowrap;}
.service-btn .float-right-title, .download-btn .float-right-title { margin-top: 0; color: #323130;}
.float-right a:hover, .service-btn:hover span.float-right-title, .service-btn.current span.float-right-title, .download-btn:hover span.float-right-title, .download-btn.current span.float-right-title { color: #34A5FF;}
.service-btn span, .download-btn span { display: block; margin-top: 8px; height: 15px; line-height: 15px; color: #34A5FF;}
.service-btn01 { background: url(../images/float_icon01.png) 10px 50% no-repeat; }
.service-btn02 { background: url(../images/float_icon02.png) 10px 50% no-repeat; cursor: default;}
.download-btn01 { background: url(../images/float_icon03.png) 10px 50% no-repeat; }
.download-btn02 { background: url(../images/float_icon04.png) 10px 50% no-repeat; background-size: 22px;}
.download-btn03 { background: url(../images/float_icon05.png) 10px 50% no-repeat; }
.download-btn04 { background: url(../images/float_icon06.png) 10px 50% no-repeat; background-size: 22px;}

@media screen and (max-width: 570px) {
.zright { height: 50%;}
.website { width: 70%; }
}