body { margin: 0; box-sizing: border-box; font-family: "方正兰亭刊黑_GBK"; }

a { text-decoration: none; }

header { background-color: #fff; }

header div { display: flex; align-items: center; text-align: center; }

header img { max-width: 100%; }

.header-wrap { position: relative; margin: 0 auto; max-width: 1000px; display: flex; }

.float-icons{ position: fixed; top: 17.5%; }

.float-icons .float-item{ display: block; margin: 0; width: 99px; height: 112px; background-repeat: no-repeat; background-size: contain; }

.float-icons .btn1 { background-image: url(../img/floatBtn-1.png); }
.float-icons .btn1:hover { transform: rotateY(360deg); transition: transform 0.8s; }

.float-icons .btn2 { background-image: url(../img/floatBtn-2.png); }
.float-icons .btn2:hover{ transform: rotateY(360deg); transition: transform 0.8s; }

.float-icons .btn3 { background-image: url(../img/floatBtn-3.png); }
.float-icons .btn3:hover { transform: rotateY(360deg); transition: transform 0.8s; }

.float-icons .btn4 { background-image: url(../img/floatBtn-4.png); }
.float-icons .btn4:hover { transform: rotateY(360deg); transition: transform 0.8s; }

.float-icons .btn5 { background-image: url(../img/floatBtn-5.png); }
.float-icons .btn5:hover { background-image: url(../img/floatBtn-5_h.png); }

.items-bg {  background: #e5f2ff; border-top: solid 1px #fff; border-bottom: solid 1px #e5f2ff; }




.item { box-sizing: border-box; background: #fff; width: 18%; margin: 0.25rem 0 3rem calc(5%/3); /*height: auto;*/ font-size: 1rem; border-radius: 10px; }

.item:hover { box-shadow: 0px 13px 28px -4px rgba(0, 101, 250, 0.3); transition: 0.3s; }

.item span { /*font-size: 0.8rem;*/font-size: min(3.5vw, 1rem); }

.tabUl li .changeVersionButton {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0.125rem 0;
    border-radius: 1rem; 
}
.button-title { display: flex; width: 100%; flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap;
border-radius: 0; margin-top: -15%;}

.button-title span{ color: #000; text-align: center; }

.button-title img{ display: block; margin: 5% auto; width: 38%; border-radius: 10px; border: #f5f5f5 solid 1px;}

.button-item{ width: 100%;}

.button-item .btn1 { border: solid 1px #fff; color: #fff; background: linear-gradient(#00cbff, #4e87fb); }
.button-item .btn2 { border: solid 1px #fff; color: #fff; background-color: #999; }

.button-item .btn1:hover { color: #fff; background: #00cbff; border: solid 1px #fff; }
.button-item .btn2:hover { color: #fff; background: #a6a6a6; border: solid 1px #fff; }


.tabBox-close { z-index: 10; position: absolute; top: 20px; right: calc((100% - 1000px) / 2 - 70px); cursor: pointer; }

/*.tabBox-wrap{ position: absolute; top: 0; width: 100%; height: auto; background: rgba(0, 0, 0, .5);}*/
.tabBox-wrap{ box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%;  background: rgba(0, 0, 0, .5); }


.items-img,.item-img99 { display: flex; justify-content: center; padding: 40px 0; }

.items-img img,.item-img99 img { max-width: 100%; }

.item-img99 { max-width: 1000px; margin: auto; }
.item-img99 { display: none;} 

footer { background-color: #e5f2ff; border-top: solid 1px #e5f2ff; }
footer div { font-size: 0.875rem; font-family: 'Microsoft YaHei UI'; color: #a4a4a4; text-align: center; padding: 0 0 57px 0; }




@media screen and (min-width: 1024px){
    
.float-icons{left: calc((100% - 1000px) / 2 - 120px);}
    
.header-wrap .header-logo{ padding: 4% 2% 1.5% 2%;}
    
.header-wrap span{ margin: 5% 0 auto 0; font-size: 1.5rem; font-weight: bold; padding: 0.5% 0.5% 0.5% 2%; color: #777777; border-left: solid 1px #777777; }
    
.header-wrap .header-btn{ position: absolute; right: 0%; bottom:15%; width: 24%; }
.header-wrap .header-btn:hover{ filter: brightness(1.2); }

.item-box { display: flex; flex-wrap: wrap; list-style: none; max-width: 1000px; width: 100%; margin: 40px auto 0 auto; justify-content: flex-start; padding: 0; }

.button-item{ margin-top: 5%; margin-bottom: 8%;}
    
.button-item .btn1,.button-item .btn2{ margin: 10px auto; width: 85%; height: 30%; padding: 12px 0; border-radius: 5px; text-align: center; }
    
.tabBox-close img{ width: 50%; }  

.mobnav { display: none;}
    
}


@media screen and (max-width: 1024px){
  
.float-icons { display: none;}
    
/*.float-icons{ position: fixed; right: 1%; top: auto; right: auto; width: 100vw; height: 100px; bottom: 0; display: flex; align-items: center; justify-content: center; background-color: #000; }
    
.float-icons .float-item{ max-width: 80px; max-height: 80px; margin: auto 1.5%; }*/
    
.item { width: 32%; margin: 0.5rem 0.5%; }
    
.tabBox-close{ width: 2rem; position: absolute; top: 2rem; right: 0rem; cursor: pointer;}

.header-wrap .header-logo{ width: 25%;padding: 2%;}
    
.header-wrap span{ margin: 2% 0; font-size: 2rem; padding: 0 2%; color: #777777; border-left: solid 1px #777777; }

.header-wrap .header-btn{ position: absolute; right: 2%; height: 100%; width: 27%; }
.header-wrap .header-btn:hover { filter: brightness(1.2); }

.item-box { display: flex; flex-wrap: wrap; list-style: none; max-width: 1000px; width: 100%; margin: 25px auto 0px auto; justify-content: flex-start; padding: 0; }  
    
.button-item .btn1,.button-item .btn2{ margin: 8px auto; width: 90%; height: 30%; padding: 5px 0; border-radius: 5px; text-align: center; transition: all .3s; }
    
.tabBox-close img{ width: 100%; }

footer div { font-size: 0.875rem; font-family: 'Microsoft YaHei UI'; color: #a4a4a4; text-align: center; padding: 0 0 100px 0; }

p { margin-top: 0; margin-bottom: 1rem }
.navlink p { margin-bottom: 0; }
.img-fluid { max-width: 100%; height: auto }
.mobnav .navlink { width: 25%; height: auto; color: #fff; display: flex; align-content: center; justify-content: center; font-size: min(3.5vw, 1rem); flex-direction: column; align-items: center; }
.mobnav .navlink img { display: block; /*margin-top: 1.2rem;*/ margin-bottom: .5rem; height: min(5vw, 35px); height: clamp(20px, 5vw, 35px); }
    
}

@media (min-width: 576px) and (max-width:1024px) {
.mobnav { display: flex; justify-content: space-between; position: fixed; bottom: 0; background-color: #0065fa; z-index: 90; width: 100%; height: 6rem; } 
.mob-nav-r { border-right: solid 1px #a8d9ff; } 
}


@media screen and (max-width: 768px){
    
.header-wrap span{ font-size: 1.125rem;}
    
/*.float-icons{ height: 85px; }
    
.float-icons .float-item{  max-width: 65px; max-height: 65px; margin: auto 1%; }*/
    
.item{ width: 30%; margin: 0.25rem 0 1.5rem calc(10%/4); }
    
.tabUl li .changeVersionButton { display: flex; flex-direction: column; padding: 0.125rem 0; }
    
.button-title,.button-item{ width: 100%; }
.button-title img { margin: 5% auto; width: 40%; }
    
}

@media (max-width: 576px) {  
.mobnav { display: flex; justify-content: space-between; position: fixed; bottom: 0; background-color: #0065fa; z-index: 90; width: 100%; height: 4.4rem; }
.mob-nav-r { border-right: solid 1px #a8d9ff; }   
}