@charset "utf-8";
/* CSS Document */
p{line-height:26px; font-size:16px; padding:0; text-indent:0; text-align: justify;}
body{margin:0; padding:0; font-size:14px; overflow: auto;   min-width:1600px; background-position:center top; font-family:"Microsoft YaHei";  position:relative;}
a{color:#000; text-decoration:none; }
html {  
    scroll-behavior: smooth;  
  }



.isie{width:100%; height:200px; float:left; line-height:100px; text-align:center; color:red; font-size:14px; background:#ece5cb; display:none}


.sticky{width:100%; height:100px;  top:0;  position: -webkit-sticky; /* Safari */  
    position: sticky; z-index: 99999;
    background:#fff; display: flex; }
.navBox{width:700px; height:100px;  display:flex; justify-content: space-between;   }

.navLinks {
    flex:1;
    height: 100px;
    position: relative;
    cursor: pointer;
    text-align: center;
    line-height: 100px;
    font-size:18px;
}

.navLinks img {
    height:100px;
    position:absolute;
    z-index:200;
    display: block;
    top:0;
    left:50%;
    margin-left:-50px;
    opacity: 0;
}

.navLinks a{width:60%;  height:96px; line-height: 100px; color:#383838; display:block;  margin:0 auto 0 auto;  }
.navSelected{border-bottom: 4px solid #2487D8;}
.mainBox{width:100%; height:auto; height:fit-content; position:absolute; top:0; z-index:100;  display:flex;  background:url(../images/bg.jpg) no-repeat; background-size:auto 100%; }


.sections {
  flex: 1;
  height: calc(100vh - 100px);
  min-height: 840px;
  border-right: 1px solid #ffffff;
  margin-top: 100px;
  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.sections:last-child{border-right:none}

.sections:hover{background:rgba(255,255,255,0.5)}

.selected{flex:8;
 backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px); cursor:auto;  }



  .selected:hover{background:none}

.logobox{width:580px; height:65px; margin-top:17px; margin-left:20px }
.logobox img{height:65px}

.notice {
  width: 1000px;
  background: rgba(255, 255, 255, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  transition: all 1.8s cubic-bezier(0.25, 0.1, 0.25, 1);
  display: none;
  opacity: 0;
  transition: opacity 0.8s ease;
  padding: 15px;
}

.titleshow{width:200px; height:30px; font-size: 30px; font-weight: bold; color:#ffffff; position:absolute; top:20px; left:20px;  opacity: 0;
    transition: opacity 0.8s ease;}



.titleVertical{width:81px; height:209px; position: absolute; top:50px;  opacity: 1;
    transition: opacity 0.8s ease;}

.notice.active, .titleshow.active, .titleVertical.active, .hosts.active {
    display: block;
    opacity: 1;
}
 
.notice.hiding, .titleshow.hiding,.titleVertical.hiding, .hosts.hiding {
    display: none;
    opacity: 0;
    transition: none;
}


.notice p{font-size:16px; line-height: 35px; margin:0; padding:0}
.notice .title{width:100%; font-size: 20px; text-align: center; font-weight: bold;}
.notice .title2{width:100%; font-size: 20px;  font-weight: bold;}

.hosts{width:1000px; height:200px; margin-top:20px; background:rgba(255,255,255,1); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);  border-radius: 20px; transition: all 1.8s cubic-bezier(0.25, 0.1, 0.25, 1); display:none; opacity: 0;
    transition: opacity 0.8s ease; padding:20px;}
 
    .coming{width:960px;height:300px; line-height: 300px; text-align: center; font-size: 40px; color:#777777}

    .goreg{width:200px; height:50px; text-align: center; margin:10px auto; line-height:50px;   border-radius: 5px; font-size: 20px; font-weight: bold; overflow: hidden;}
    .goreg a{width:100%; height:100%; display:block; color: #fff; background:#2487D8;}
        .goreg a:hover{background:#48a8f7}