@charset "utf-8";*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
*,body{padding:0;margin:0;font-family:"PingFang SC","Lantinghei SC","Microsoft YaHei","HanHei SC","Helvetica Neue","Open Sans",Arial,"Hiragino Sans GB",微软雅黑,STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif,HYWenHei-GEW}

body,html{height:100%}
li{list-style-type:none}
i{margin:0;padding:0;text-indent:0}
img{border:none;max-width:100%;
    /* image-rendering: -webkit-optimize-contrast;  */
}
a{text-decoration:none;color:#fff}
a.active,a:focus{outline:0!important;text-decoration:none}
h1,h2,h3,h4,h5,h6,ol,p,ul{padding:0;margin:0}
a:hover{color:#06c;text-decoration:none!important}
i{font-style:normal}
@font-face{font-family:electronicFont;src:url(../font/DS-DIGIT.TTF)}
/* 滚动条 */
::-webkit-scrollbar {width:3px;position:absolute;}
::-webkit-scrollbar-thumb {background:#ff0000}
::-webkit-scrollbar-track {background:#6c1a1a}

body{color:#fff;font-size:14px;overflow-x:hidden; background: #000d4a url(../img/bg.jpg) center center;
    background-size: cover;
    color: rgba(255,255,255,.75); overflow: hidden;}


    .videobg{ position: fixed;; width: 100%; height: 100%; left: 0; top: 0; z-index: 1;left: 0; top: 0;
        background: #000;background: -webkit-radial-gradient(50% 10%,farthest-corner, #2a4fa9 0%, #101e42 50%,#0b1024,#000);}
    .videobg video{ object-fit: cover; filter:blur(2px); opacity: .05;filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='5'); position: relative; }
        

    
    .style1,.style2{position:absolute;width:100%;height:100%;pointer-events:none;border-radius:3px}
    .style2{border:none}
    .style1:before{width:100%;height:1px;content:"";background:linear-gradient(to right,rgba(255,255,255,.02),rgba(108,176,255,.1),rgba(255,255,255,.02));position:absolute}
    .style2::after,.style2:before{width:1px;height:100%;content:"";background:linear-gradient(to bottom,rgba(108,176,255,.04),rgba(255,255,255,0));position:absolute}
    .style1:before{top:0}
    .style2:before{left:-1px}
    .style2:after{right:-1px}



body:after {
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
    content: "";
    width: 100%;
    height: 100%;
    background: url(../img/bg1.png) no-repeat center top;
    opacity: 0.3;
    pointer-events: none;
}

.mainbox{ position: relative; z-index: 10;}
.mainbox>ul{display:flex;padding:10px 15px}
.mainbox>ul>li{width:25%;padding:0}
.mainbox>ul,
.mainbox>ul>li{ height: 100%;}
/* 标题 */
.tit{padding:10px 10px 10px 30px;font-size:16px;line-height:18px;color:#acf1f9;position:relative;font-weight:normal;text-align:center;background: url(../img/balltbg.png) no-repeat center center;
    background-size: 100% 48px;}
/*.tit:before{transform:rotate(45deg);border-radius:3px;position:absolute;content:"";width:6px;height:6px;border:2px solid #81bcff;left:12px;top:16px}*/

/* .card{height:26vh;margin-bottom:10px;border-radius:5px;backdrop-filter:blur(3px);background:linear-gradient(135deg,rgba(247,111,0,.2),transparent,transparent);box-shadow:0 0 20px rgba(0,0,0,.1);position:relative;border:none}
.card:after{position:absolute;left:0;top:0;z-index:1;pointer-events:none;content:"";width:100%;height:100%;background:linear-gradient(315deg,rgba(255,47,47,.5),transparent,transparent)} */


/* 边框&背景 */
.card{position:relative;height:300px; margin-bottom:15px; backdrop-filter:blur(3px);background:linear-gradient(135deg,rgba(0, 169, 247, 0.2),transparent,transparent,rgba(0, 169, 247, 0.1));box-shadow:0 0 20px rgba(0,0,0,.1);}
.card::before{position:absolute;right:0;top:0;pointer-events:none;content:"";border-right:1px solid #0793ff;border-top:1px solid #0793ff;width:calc(100% - 200px);height:calc(100% - 10px); }
.card:after{position:absolute;left:190px;top:0;pointer-events:none;content:"";background:url(../img/line010.png);width:70px;height:11px;}
.boxnav{padding:10px 15px;height:calc(100% - 33px);position:relative;z-index:10}
.boxnav::before{position:absolute;left:0;bottom:0;pointer-events:none;content:"";border-left:1px solid #0793ff;border-bottom:1px solid #0793ff;width:calc(100% - 100px);height:calc(100% - 50px);}
.boxnav:after{position:absolute;right:0;bottom:0;pointer-events:none;content:"";background:url(../img/line01.png);width:75px;height:11px;}
.boxnav:after,
.boxnav::before,
.card:after,
.card::before{opacity: .35;}

/* 动画 */
.fadeIn{opacity:0;animation:fadeIn 1.5s forwards}
.fadeInDown{opacity:0;transform:translate3d(0,-100%,0);animation:fadeInDown .6s forwards}
.fadeInUp{animation:fadeInUp 1s forwards;opacity:0}
.fadeInLeft{animation:fadeInLeft .6s forwards}
.bounceIn{transform:scale(0,1);animation:bounceIn .6s forwards}
@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
to{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}
to{opacity:1;transform:scale(1)}
}
@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
to{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
to{opacity:1;-webkit-transform:none;transform:none}
}
.delay02{animation-delay:.2s}
.delay04{animation-delay:.4s}
.delay06{animation-delay:.6s}
.delay08{animation-delay:.8s}
.delay1{animation-delay:1s}
.delay12{animation-delay:1.2s}
.delay14{animation-delay:1.4s}
.delay16{animation-delay:1.6s}
.delay18{animation-delay:1.8s}
.delay2{animation-delay:2s}

/* 滚动所需 */
.str_wrap{overflow:hidden;width:100%;position:relative;-moz-user-select:none;-khtml-user-select:none;user-select:none;white-space:nowrap}
.str_move{white-space:nowrap;position:absolute;top:0;left:0;cursor:move}
.str_move_clone{display:inline-block;vertical-align:top;position:absolute;left:100%;top:0}
.str_vertical .str_move_clone{left:0;top:100%}
.str_down .str_move_clone{left:0;bottom:100%}
.str_down .str_move,.str_vertical .str_move{white-space:normal;width:100%}
.noStop .str_move,.no_drag .str_move,.str_static .str_move{cursor:inherit}
.str_wrap img{max-width:none!important}

.listhead{display:flex;justify-content:space-between;color:rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.1)}
.listnav{height:calc(100% - 30px);}
.listnav ul li{height:100%;display:flex;justify-content:space-between}
.listhead span,.listnav li span{padding:8px 0;text-align:center;font-size:13px;}
.listhead span{padding-top:0}


.listhead span:nth-child(1),
.listnav li span:nth-child(1){width: 10%; white-space: nowrap;}

.listhead span:nth-child(2),
.listnav li span:nth-child(2){width: 45%; text-align: left; padding-right: 10px;}
.listhead span:nth-child(3),
.listnav li span:nth-child(3){width: 15%;white-space: nowrap;}
.listhead span:nth-child(4),
.listnav li span:nth-child(4){width: 30%;white-space: nowrap;}

.listnav ul li:nth-child(odd){background:rgba(255,255,255,.05)}
.listnav ul li{}


/* 数字类 */
.txtnum{height:90%;display:flex;align-items:center; justify-content: center;}
.txtnum li{text-align:center;position:relative; padding:30px 30px;}
.txtnum li>div{position: relative; z-index: 10;;}
.txtnum span{color:#fff; display: block;  padding-top: 5px; white-space: nowrap;font-size: 16px;}
.txtnum p{font-size: 46px;color: #ffeb7b;padding: .05rem 0;font-family: electronicFont;font-weight: bold;}
.txtnum li:after{height:100%;width:100%;content:"";left:0;top:-2px;position:absolute;background:-webkit-radial-gradient(50% 50%,farthest-corner,#0076d1 0,transparent,transparent);opacity:.4}
.txtnum li::before{height:120%;width:1px;content:"";right:0;top:-10%;position:absolute;background:linear-gradient(to bottom,transparent,#a8d6ff,transparent);opacity:.5}
.txtnum li:last-child::before{display:none}


.maptabs{position: absolute; left:-30px; top: 120px; z-index: 11; padding: 10px 20px;}
.maptabs li a{ display: block; transition: all .5s; color: rgba(255,255,255,.75); text-align: center; height: 48px; background: url(../img/btn1.png) right top no-repeat; width: 140px;  padding: 6px 0 0 10px ; 
  font-size: 15px; 
   margin: 10px 0;}

.maptabs li.active a{ background: url(../img/btn2.png) right top no-repeat; color: #fff; font-weight: bold;}
.maptabs li a:hover{ transform: translateX(10px); color: rgba(0, 191, 255, 0.85);}
.maptabs p{ padding: 15px 30px; color: #07e5ff; }


/* 头部大标题  */
.head {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: 10;
	background: url(../img/head_bg2.png) no-repeat center center;
    background-size: 100% 100%;
    position: relative;
}

    .head h1 {
     font-size: 30px;
    letter-spacing: 1px;
    text-align: center;
    line-height: 55px;
        background: -webkit-linear-gradient(bottom, #77baff, #ffffff);
    background: linear-gradient(bottom, #77baff, #ffffff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    }


.bar{padding: .15rem;position: absolute; width: 100%;}
.barbox li,.barbox2 li{ width:33.33%; text-align: center; position: relative; z-index: 100;}
.barbox:before,
.barbox:after{ position:absolute; width: .3rem; height: .1rem; content: ""; }
.barbox:before{border-left: 2px solid #02a6b5;left: 0;border-top: 2px solid #02a6b5; }
.barbox:after{border-right: 2px solid #02a6b5; right: 0; bottom: 0;border-bottom: 2px solid #02a6b5; }

.barbox li:first-child:before{ position:absolute; content: ""; height:50%; width: 2px; background: rgba(255,255,255,.2); right: 0; top: 25%;}
.barbox li:nth-child(2):before{ position:absolute; content: ""; height:50%; width: 1px; background: rgba(255,255,255,.2); right: 0; top: 25%;}
.barbox{ margin:20px; border: 1px solid rgba(25,186,139,.17); position: relative;}
.barbox li{ font-size: .7rem; color: #ffeb7b; padding: .8rem 0;  font-family:electronicFont; font-weight: bold;}
.barbox2 li{ font-size: .19rem; color:rgba(255,255,255,.7); padding-top: .1rem;}


/* .others{position: absolute;width: 1920px; left: calc(50% - 960px); top: 0;} */
.others{position: relative; height: 100%; display: flex; align-items: center; }
.others>span{ position: absolute;}
.others .img1{ top: 5px; width: 200px; right: 50px;}
.others .img2{  width: 180px; left: 130px; top: -10px}
.others .img3{  width: 100px; left: 30px; transform: rotate(45deg); top: 0px;}

/* 图标类 */
.drqk{height:100%;display:flex;align-items:center;flex-wrap:wrap; justify-content: center;}
.drqk li{width:50%;display:flex;align-items:center; }
.icon{display:flex;position:relative;justify-content:center;align-items:center;flex-shrink:0;margin-right:15px;padding:15px;width:60px;height:60px}
.icon::before{position:absolute;content:"";background:url(../img/iconbg.png) no-repeat center center;background-size:auto 100%;width:100%;height:100%;left:0;top:0}
.drqk li span{}
.drqk li em{background:linear-gradient(0deg,#f2f9ff,#bfe0ff);font-style:normal;background-size:cover;font-family:"等线";font-weight:bolder;font-size:24px;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-fill-color:transparent}

/* 背景动画类  */
.linebox{ position: absolute; width: 100%;  transform: scale(1.3,0.65); overflow: hidden;  height: 100%; left: 0; top: 15%; display: flex; justify-content: center; align-items: center;}
.linebox>span{ position: absolute;  opacity: .1; width: 100%; height: 100%;}
.linebox>span img{width: 100%; height: 100%; object-fit: contain;}
.linebox .line1{ width: 30%; animation:scales1 60s linear infinite}
.linebox .line2{ width: 40%; animation:scales2 55s linear infinite}
.linebox .line3{ width: 47%;  animation:scales1 50s linear infinite}
.linebox .line4{ width: 60%;  animation:scales2 45s linear infinite}
.linebox .line5{ width: 20%;  animation:scales1 40s linear infinite}
.linebox .line6{ width: 70%;  animation:scales2 35s linear infinite}
.linebox .line7{ width: 75%; animation:scales1 30s linear infinite}

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

@keyframes scales2{
0%{transform: rotate(0deg);}
100%{transform: rotate(-360deg);}
}


.marker{animation:fadeInDown 1s forwards; cursor: pointer;position: absolute; transition: all .5s; align-items: center;
    display: flex; justify-content: center; }
    .marker:before{ width: 8px; height: 8px; border-radius: 5px; background: rgb(0, 255, 255); position: absolute; content: ""; transform: scale(1,.75);}
   .marker:hover span{display: block;}
   .marker>i{ width: 20px; height: 20px;position: absolute; display: flex; align-items: center; justify-content: center; transform: scale(1,.75);}
   .marker>i::after,
   .marker>i::before{ position: absolute;  content: "";background: rgba(0, 179, 255, 0.7); border: 1px solid rgb(161, 203, 255);; border-radius: 100px; transform: scale(0);opacity: 0;}
   .marker>i::after{ width: 150%; height: 150%;animation: fadein 2s  infinite linear; }
   .marker>i::before{width:200%; height:200%;animation: fadein 2s 1s infinite linear;}
   

   @keyframes fadein {
       0%{transform: scale(0); opacity: 0;}
       50%{transform: scale(.5); opacity: 1;}
       100%{transform: scale(1); opacity: 0;}
      }
     
.map{ }
.map1,.map2,.map3{ position:absolute; opacity: .5}
.map1{ width:100%; z-index: 2;top:.65rem;   animation: scales1 15s infinite linear;text-align:center;}
.map2{ width:100%; top:.85rem; z-index: 3; opacity: 0.2; animation: scales2 10s infinite linear;text-align:center;}
.map3{ width:100%; top:3rem; margin:0 auto;text-align:center;opacity: .3}