*{-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}

/* 滚动条 */
::-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(../image/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::before{content:"";position:absolute;width:100%;opacity:1;transition:all .5s;height:100%;top:0;left:0;pointer-events:none;background-color:transparent;background-image:url(../image/pattern.png);background-size:4.6875rem;background-repeat:repeat;background-attachment:initial;z-index:11;opacity:.8}

body:after {
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
    content: "";
    width: 100%;
    height: 100%;
    background: url(../image/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 0 30px;font-size:16px;font-weight:500;color:#bcdcff;position:relative;font-weight:bolder;display:flex}
.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:10px; 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:2px solid #0793ff;border-top:2px solid #0793ff;width:calc(100% - 200px);height:calc(100% - 20px); }
.card:after{position:absolute;left:190px;top:0;pointer-events:none;content:"";background:url(../image/line01.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:2px solid #0793ff;border-bottom:2px solid #0793ff;width:calc(100% - 100px);height:calc(100% - 50px);}
.boxnav:after{position:absolute;right:0;bottom:0;pointer-events:none;content:"";background:url(../image/line02.png);width:75px;height:11px;}
.boxnav:after,
.boxnav::before,
.card:after,
.card::before{opacity: .15;}

/* 动画 */
.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);border-bottom:1px solid rgba(255,255,255,.1)}
.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: 8%; white-space: nowrap;}

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

.listnav ul li:nth-child(odd){background:rgba(255,255,255,.05)}
.listnav ul li{border:1px solid rgba(255,255,255,.1);border-top:none;border-bottom:none}


/* 数字类 */
.txtnum{height:100%;display:flex;align-items:center; justify-content: center;}
.txtnum li{text-align:center;position:relative; padding:0 30px;}
.txtnum li>div{position: relative; z-index: 10;;}
.txtnum span{color:rgba(255,255,255,.75); display: block;  padding-top: 5px; white-space: nowrap;}
.txtnum p{font-size:24px;font-style:normal;font-weight:bolder; color: #fff; display: inline; white-space: nowrap;
    background:linear-gradient(0deg,#f2f9ff,#bfe0ff);font-style:normal;background-size:cover;font-family:"等线";font-weight:bolder;font-size:30px;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-fill-color:transparent
}
.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(../image/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(../image/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{display:flex;justify-content:center;align-items:center;}
.head h1{flex-shrink:0;background:url(../image/headcenter.png) no-repeat center bottom; background-size:100% auto  ;height:85px;line-height: 85px;}
.head h1 span{font-size:46px;background:linear-gradient(to bottom,#00fff7,#37cdff); padding: 0 20px;   background-size:cover;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-fill-color:transparent;font-weight:bold;	font-family:"Microsoft YaHei"; line-height: 1; letter-spacing: 2px;}
.head::after,.head::before{height:85px;content:"";width:100%}
.head::before{background:url(../image/headleft.png) no-repeat right bottom;}
.head::after{background:url(../image/headright.png) no-repeat left bottom; }

.timebox{ position: absolute; right: 30px; font-size: 16px; color: #50c2ff; padding-bottom: 42px;}
.timebox span{ color: #fff; padding-left: 10px;}


/* .time{ position:absolute; right:15px; top:0; line-height: 66px;color:rgba(255,255,255,.7); font-size: 18px; padding-right: 15px;} */
.map{display: flex; justify-content: center; align-items: center;}
.mapbox{width: 90%;  position: relative;}
.mapbox img{width: 100%;}

/* .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(../image/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;}
      }