.lineframe{
border-radius:30px;
        border:3px solid RGBA(255,255,255,0);
        box-shadow:0 0 0 2px #737fbc;
        color:#485696;
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        line-height:30px;
        text-align:center;
}
      .innerItem{
background-color:#c6d7ff;
        border-radius:30px;
        border:3px solid RGBA(255,255,255,0);
        outline:none;
        color:#485696;
        position:relative;
           font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        line-height:30px;
        text-align:center;
        box-shadow:0 0 0 1px #737fbc;
        overflow:hidden;
        background-clip:padding-box;
        
      }
      .innerItemSolid{
background-color:#c6d7ff;
        border-radius:30px;
        border:3px solid RGBA(255,255,255,0);
        outline:none;
        color:#485696;
        position:relative;
           font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        line-height:30px;
        text-align:center;
        box-shadow:0 0 0 1px RGBA(0,0,0,0);
        overflow:hidden;
        background-clip:padding-box;
        
      }

            .innerFrame{
background-color:RGB(255,255,255);
        border-radius:30px;
        border:2px solid #737fbc;
        outline:none;
        color:#485696;
        position:relative;
           font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        line-height:30px;
        text-align:center;
        overflow:hidden;
        background-clip:padding-box;
        width:fit-content;
         width:-webkit-fit-content;
      }
          .NoBorder{
        border:3px solid RGBA(255,255,255,0);
        outline:none!important;
        box-shadow:0 0 0 1px RGBA(255,255,255,0)!important;
      }
      button:hover{
             
               animation:ExtOut 0.3s ease-in-out;
               animation-iteration-count:1;
               animation-fill-mode:forwards;
}
      .innerItem{
             
               animation:ExtIn 0.3s ease-in-out;
               animation-iteration-count:1;
               animation-fill-mode:forwards;
     }
    
    
      @keyframes ExtOut{
        0%{
            border:3px solid RGBA(255,255,255,0);
        box-shadow: 0 0 0 1px #737fbc;

}
          
       
100%{
          
                        border:3px solid #c6d7ff;
          box-shadow: 0 0 0 2px #737fbc;
}

}
      @keyframes ExtIn{
        0%{

                        border:3px solid #c6d7ff;
          box-shadow: 0 0 0 2px #737fbc;
}
          
       
100%{
          
            border:3px solid RGBA(255,255,255,0);
        box-shadow: 0 0 0 1px #737fbc;
}

}

@keyframes DivFadeIn {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }

  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes DivBlurIn {
  from {
    opacity: 0;
    filter:blur(5px);
  }

  to {
    opacity: 1;
        filter:blur(0px);
  }
}
.Content{
  position: relative;width:55%;height:100%;
}
.iView
{
  top:0;
  position:fixed;
  height:100%;
  width:45%;
  float: left;
  white-space:nowrap;
  overflow-x:hidden;
  overflow-y:hidden;
  display:block;
  right:0;

}
  #navbar {
    left:0;
  background-color: RGBA(255,255,255,1);
  padding: 50px 10px; 
  transition: 0.8s; 
  position: fixed; 
  width: calc(55% - 5px);
  top: 0; 
  z-index: 99;
user-select:none;
     animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: DivFadeIn;
}
.iViewDrawerCont{
  position:fixed;
  margin-left:40px;
  left:55%;
}
@media screen and (max-width: 1320px) {
  .iView{
    width:35%;

  }
    .Content{
    width:65%;

  }
  .iViewDrawerCont{
  left:65%;
}
   #navbar {
     width:calc(65% - 5px);
   }
   .iView img{
          width:25%;
   }
}
@media screen and (max-width: 960px) {
  .iView{
    display:none;

  }
    .Content{
    width:100%;

  }
   #navbar {
     width:100%;
   }
}
.ViewContent{
position:relative;width:auto;height:100%;image-rendering: -webkit-optimize-contrast;
}
.iView img:hover {
  /*
  transition:0.5s;
  transform:scale(1.02);
    box-shadow: 0px 10px 30px 3px #737fbc;
    */
}
.iView img{
  margin:15px 15px;
  user-select: none;
  position:fixed;
    transition:0.2s;
      transform:scale(1);
      box-shadow: 0px 0px 0px 0px #737fbc;
      width: calc(45% - 30px);
    height: calc(100% - 30px);
user-drag: none;
-webkit-user-drag: none;
overflow:hidden;
  object-fit: cover;
object-position: 50% 50%;
       animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: DivBlurIn;
    border-radius:12px;
}
.iViewFloatBox {
  display:block;
  position:fixed;
  right:35px;
  top:35px;
  width:200px;
  height:40px;
  background-color: rgba(255,255,255,1);
    box-shadow: 0px 0px 0px 2px RGB(0,0,0);
  color:rgba(0,0,0,0.95);
  border-radius:8px;
  z-index: 10;
transition: all .3s cubic-bezier(0.74, 0, 0.15, 1);
}
.iViewFloatRefreshBox {
  display:block;
  position:fixed;
  box-shadow: 0px 0px 0px 2px RGB(0,0,0);
  right:35px;
  bottom:35px;
  width:40px;
  height:40px;
  background-color: rgba(255,255,255,1);
  border-radius:8px;
  z-index: 10;
  color:rgba(0,0,0,0.95);
transition: all .3s cubic-bezier(0.74, 0, 0.15, 1);
}
.iViewFloatScrollBox {
  box-shadow: 0px 0px 0px 2px RGB(0,0,0);
  display:block;
  position:fixed;
  right:95px;
  bottom:35px;
  width:115px;
  height:40px;
  background-color: rgba(255,255,255,1);
  border-radius:8px;
  z-index: 10;
  color:rgba(0,0,0,0.95);
transition: all .3s cubic-bezier(0.74, 0, 0.15, 1);
}
.biTransNormal
{
  transform:translate(8px,8px) rotateZ(0deg);
  transition: .5s;
}
.iViewFloatRefreshBox:hover .biTransNormal
{
  transform:translate(8px,8px) rotateZ(45deg);
  transition: .5s;
}
#iView_t{
  font-weight:600;
}
#iView_hidden{
  display:none;
}
.iViewFloatBox:hover #iView_hidden{
  display:block;
}
.iViewFloatBox:hover{
     height:110px;
       box-shadow:2px 2px 8px 0px rgba(20,20,20,.08);
       transition: all .3s cubic-bezier(1, 0, 0, 1);
}
.iViewFloatBox p{
    width:180px;

   white-space:normal;
word-wrap:break-word;
  margin-top:12px;
  margin-left:10px;
  color:rgba(0,0,0,0.95);
  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif!important;
}
.iViewDrawer{
  background-color: rgba(255,255,255,0.75);
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:0px;
  transition:.3s;
  overflow:hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#navbar a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px 40px;
  margin-right:30px;
  text-decoration: none;
  font-size: 17px;
  line-height: 25px;
  border-radius: 2px;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

#navbar #logo {
  font-size: 18px;
  font-weight: bold;
  transition: 0.4s;
font-family: Futura, "Trebuchet MS", Arial, sans-serif; 
}

#navbar a:hover {
  background-color: RGB(20,20,20,0.1);
  /*box-shadow:0 0 0 2px RGBA(20,20,20,0.5);*/
  color: black;
  transform:scale(1)!important;
}
#navbar:hover #logo
{
background-color: RGB(255,255,255,0.0);
  /*box-shadow:0 0 0 2px RGBA(20,20,20,0.5);*/
  color: black;
  transform:scale(1)!important;
}
#navbar a.active {
  background-color: dodgerblue;
  color: white;
}

#navbar-right {
  float: right;
}
.bi-list
{
  display:none;
  float:right;
  margin-right:-25px;
}
@media screen and (max-width: 1110px) {
  #navbar {
    padding: 20px 10px ;
  }
  #navbar a {
    float: none;
    display: block;
    text-align: left;
  }
}
@media screen and (max-width: 1110px) {
  #navbar #logo {
  font-size:0;
}
  #navbar a {
  font-size: 14px;
}
  #navbar-right li {
  width:100%;
}
.bi-list
{
  display:block;
  cursor:pointer;
}
  #navbar-right {
    float: none;
    display:none;
  }
  }

  .dropContainer{
        display: none;
        background-color: RGBA(255,255,255,0.7);
        position: relative;
        float: none;
        margin-top:50px;
        width: 200px;
      }
       .dropContainer ul{
            float: left;
        }
  #navbar ul li:hover ul{
         display: block; 
}
  #navbar ul li:hover .dropContainer{
         display: block; 
}
      #navbar ul{
        margin:0;
        padding:0;
           list-style-type: none;
       }
      #navbar ul a{
        list-style-type: none;
        overflow: hidden;
        text-decoration: none;
      }
      #navbar li{
        list-style-type: none;
        display: block;
        float: left;
        margin-right:0px;
        text-align: center;
        color: white;
      }

      
      .scrollbar {
        width: 30px;
        height: 300px;
        margin: 0 auto;
      }
.Content{
  overflow:auto;
}
      .Content::-webkit-scrollbar {
        width: 5px; 
        height: 1px;

      }
            .Content::-webkit-scrollbar-track:hover{
       background: rgba(20,20,20,0.2);

      }
      .Content::-webkit-scrollbar-thumb {
        border-radius: 10px;
        /*-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);*/
        background: rgba(255,255,255,0.5);
      }

       .Content::-webkit-scrollbar-track {
       /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);*/
        border-radius: 10px;
        background: RGBA(255,255,255,0.0);
      }
      .iView::-webkit-scrollbar {
        width: 1px; 
        height: 8px;
      }

      .iView::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgb(137, 142, 151,0.3);
      }

      .iView::-webkit-scrollbar-track {
       /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);*/
        border-radius: 5px;
        background: RGBA(255,255,255,0.0);
      }
      .iView::-webkit-scrollbar:hover{
       /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);*/
        background: RGBA(233,233,233,0.6);
      }
          .ProjectBar::-webkit-scrollbar {
        width: 1px; 
        height: 10px;

      }
            .ProjectBar::-webkit-scrollbar-track:hover{
       background: rgba(20,20,20,0.2);

      }
      .ProjectBar::-webkit-scrollbar-thumb {
        border-radius: 10px;
        /*-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);*/
        background: rgba(255,255,255,0.5);
      }

       .ProjectBar::-webkit-scrollbar-track {
       /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);*/
        border-radius: 10px;
        background: RGBA(255,255,255,0.0);
      }
    
      .PageBox{
        position:relative;padding-left:15%;padding-right:15%;min-width:300px;overflow-x:auto
      }
@media screen and (max-width: 550px) {
  .PageBox .innerFrame{
    width:100%;
     height:43px;

  }
  .PageBox .innerFrame .NoBorder{
    width:60%;
  }
    .PageBox .innerItemSolid {
    float:right;
  }
   .PageBoxTitle{
    font-size:1.0rem!important;
     line-height: 50px!important;
   }
}

      .PageBoxTitle{
        line-height: 40px;
        font-size:20px;
        font-weight: bold;
       font-family: 'Open Sans',Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif; 
      }
      a {
  text-decoration:none ;
    display: inline-block;
    color: RGB(115,127,188);

    transition:  .1s;
}

a:hover {
   transform: scale(1.05);
   color: RGB(135,147,188);
}
h2{
font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif!important;
}
.pageTitleDiv{
 position:relative;padding-left:15%;padding-right:15%;min-width:300px;overflow-x:auto;margin-top:50px;

}
.pageTitle{
  font-family:'Bodoni Moda',Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif ;
  white-space:normal;
word-wrap:break-word;
font-size:4rem;
transition:.3s;

}
.pageTitleDes{
  font-family:'Open Sans',Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif; 
font-size:1.2rem;
color:#000;
}
.pageTitleDes:hover{
color:#000;
}
@media screen and (max-width: 820px)
{
  .pageTitle{
    padding-top:-30px;
    font-size:3rem;
    margin:0 auto;
  }
  .pageTitleDes{
transform:translateY(0.5rem)!important;
}
.pageTitleDiv{
  overflow:visible;
}
}
.center-line{
      position:relative;
    }
    .center-line::after{
      content:'';
      display:block;
      width:100%;
      height:3px;
      position:absolute;
      bottom:-10px;
      background:#000;
      transition:all 0.3s ease-in-out;
      transform: scale3d(0.5,1,1);
      transform-origin:50% 0;
    }
    .center-line:hover::after{
      transform:scale3d(1,1,1);
    }

.con-text {
  font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #555555;
  line-height: 1.7;
  letter-spacing: 0.3px;
  margin-left: 5px;
  text-align: left;
  max-width: 720px;
  padding: 0 10px;
  width:98%;
  white-space: pre-wrap;
}
.con-text2 {
  font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #555555;
  line-height: 1.7;
  letter-spacing: 0.3px;
  margin-left: 5px;
  text-align: left;
  max-width: 720px;
  padding: 0 10px;
  width:98%;
  white-space: pre-wrap;
}
h5{
 font-family: Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif; 
}

h2 a{    color: RGB(0,0,0)!important;}
ul li{
  list-style: none;
}
btx{
  user-select: none;
  margin-left:9px;
  font-weight:600;
  font-size:16px;
   font-family: Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif; 
}
.coverTitle {
  font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
  font-size: 28px;
  font-weight: 700; /* 粗体 */
  color: RGB(20,20,20);
  text-align: left;
  margin-left: 0px;
  line-height:0rem;
  padding: 10px 0;
  letter-spacing: 0.5px;
  position: relative;
  display: inline-block;
  width: 100%;
  margin-left:20px;
}
.SearchBox{
  min-height:40%;
  width:100%;
  background-color:RGBA(255,255,255,0.75);
  border-radius: 20px;
  box-shadow: 5px 5px 50px 0px RGBA(45,46,80,0.3);
  font-size:1.3rem;
  line-height: 40px;
  position:fixed;
  z-index:99;
  display:none;
  overflow:auto;
   left:0;
 top:-20px;
 border-top-left-radius:0;
border-top-right-radius:0;
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
trsnsition:0.3s cubic-bezier(0.63, 0.63, 0.47, 1);
}


.StoryBg{
  height:100%;
  width:100%;
  top:0;
  left:0;
  background-color:RGBA(20,20,20,0.65);
  font-size:1.3rem;
  line-height: 40px;
  position:fixed;
  z-index:99;
  display:none;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
transform: translateZ(1px);
}
.StoryCard{
  height:80%;
  width:80%;
  top:0;
  left:0;
  right:0;
  margin:0 auto;
  background-color:RGBA(255,255,255);
  border-radius: 5px;
  box-shadow: 5px 5px 50px 0px RGBA(45,46,80,0.3);
  font-size:1.3rem;
  line-height: 40px;
  position:fixed;
  z-index:99;
  display:none;
  overflow:hidden;
transform: translateZ(1px) translateY(12.5%);
}
.footer
{
  margin-top:10rem;
  position: relatve;
   justify-content: center;
   align-items: center;
   display:inline-block;
   text-align: center;
   width:100%;
   height:fit-content;
}
    
.unisvg{
  transform:rotateZ(0deg) translate(2px,2px);
  transition:.3s;
}
#navbar-right a:hover .unisvg
{
  transition:.3s;
  transform:rotateZ(90deg) translateX(2px);
}
.ProjectSect
{
   -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow:hidden;

  width:100%;
    position:relative;
white-space:nowrap;
  float:left;

}
 .ProjectCover
{
  left:-10px;
  float:left;
    display:block;
  margin-top:20px;
  margin-left:20px;
  position:relative;
  width:240px;
  height:280px;
  background-color: RGB(255,255,255);
  border-radius:12px;
  box-shadow:0 0 0 2px RGBA(0,0,0,1) inset;
  transform: scale(1.0);
  transition:all 0.3s;
}
 .ProjectCover:hover
 {
    transition:all 0.3s;
      transform: scale(1.005) translateY(-1px);
 }
 .ProjectInner
{
    display:inline-block;
  left:10px;
  top:10px;
  position:relative;
  width:calc(100% - 20px);
  height:120px;
  background-color: RGB(243,243,243);
  border-radius:12px;
  /*box-shadow:0 0 0 2px RGBA(0,0,0,1) inset;*/
  position: relative;
}

.ProjectGradient
{
  position: absolute;
  left:calc(100% - 60px);
  height:100%;
  width:60px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}
.ScrDivide
{
  width:100%;
  height:2rem;
  display:none;
}
@media screen and (max-width: 820px)
{
  .ProjectCover
{
  width:260px;
  height:280px;
}
.ScrDivide
{
  width:100%;
  height:2rem;
  display:inline-block;
}
}

@media screen and (max-width: 480px)
{
  .ProjectCover
{
  width:240px;
  height:280px;
}

}