body{font-family: 'Microsoft YaHei';}


  @font-face{
      font-family: 'impact';
      src : url('../fonts/impact.ttf');
  }

  .gr-nav{
    padding: 0;
    font-family: 'impact';
    font-size: 20px;
    background: #fff;
  }
  .gr-nav>ul{

    position: fixed;
    top: 0px;
    left: 0px;
  }

.nav a{
color: #ebebeb;
text-align: center;
}
.nav>li{
    width:8.4vw;
}

.gr-maincontain{
  padding: 0;
  overflow: hidden;
}

.nav-pills>li.active>a{
  border-radius: 0px;
}

.nav>li>a, .nav>li>a{transition: color 0.5s;}
.nav>li>a:focus, .nav>li>a:hover{
  border-radius: 0px;
  background-color: #fff;
  color: #d2d2d2;
}

.nav-pills>li.active>a{
  background-color: #ff5a79;
  border-radius: 0px;
}

.nav-pills>li.active>a{
  background-color: #ff5a79;
  color: #fff;
}
.nav-pills>li.active>a, .nav-pills>li.active>a{transition: box-shadow 0.8s;}
.nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
  background-color: #ff5a79;
  box-shadow: 0px 6px 12px #b8b8b8;
}


.nav>li>a{
  height: 13vh;min-height: 100px;
  padding: 20px 15px;
}
.navimg{height: 6.8vh;max-height: 60px;}
.gr-nav>.nav>.gr-navlogo>a{
  padding: 30px 15px;
}

.gr-navlogo{
  margin-bottom: 10.2vh;;
}


.gr-nav>.nav>.gr-contact{
  background-color: #191a28;
  width: 8.4vw;
  position: fixed;
  bottom: 0px;
  left: 0;
}

.gr-contact>a{
  color: #fff;
}

.gr-nav>.nav>.gr-contact>a, .gr-nav>.nav>.gr-contact>a{transition: background-color 1s;}
.gr-nav>.nav>.gr-contact>a:focus, .gr-nav>.nav>.gr-contact>a:hover{
  text-decoration: none;
  background-color: #282939;
}
.navfont{
  margin-top: 4px;
}


.aaa{
  background-color: #123456;
  height: 3000px;
}
.juzhong1{
  background-color: #123456;
  text-align: center;
}
.contact111{
  /* background-color: #fff; */
  text-align: center;
  height: 100vh;
}
.juzhong2{
  display: inline-block;
  width: 1300px;
}

.bg_video{
  width: 1920px;
  height: 1080px;
  z-index: -100;
}
.video_zz{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 90;
background-color: #191a28;
opacity: .9;
}

#ul_container{width: 100%;height: 100%;}
.gr-indexslogan1{position: absolute;top: 18vh;left:50%;z-index:8;}
.gr-indexslogan2{position: absolute;top: 36vh;left:50%;z-index:16;}
.img1{margin-left: -268px;}
.img2{margin-left: -440px;}

.gr-indexsarrow{
position: absolute;
top: 94vh;
left: 50%;
margin-left: -12px;
z-index: 1111;
}

.gr-03works{position: absolute;top: 20vh;left: 0%;z-index: 1;width: 44%;max-width: 640px;}
.carousel-inner>.item>img{max-width: none;}
.carousel-indicators{top:95vh;left:70px;z-index: 10000;}
.carousel-control{z-index: 1000;}
.carousel-control.right,.carousel-control.left{background-image: none;}
.item{height: 100vh;}
.gr-works1{background-color: #9ebfd2;}
.gr-works2{background-color: #ff9caf;}
.gr-works3{background-color: #3d3e4c;}
.gr-works-yuan{width: 75%;padding-bottom: 75%;border-radius: 50%;background-color: rgba(0,0,0,0.05);position: absolute;right: -16%;top: 30%;}

.home-works1{position: absolute;top: 2vh;left: 50%;margin-left: -275px;}

.gr-skill{width: 20%;height: 70vh;background-color: #282939 ;display: block;position: absolute;top:50vh;margin-top: -35vh;max-width: 380px;z-index: 10;transition: background-color 1s;}
.gr-skill:hover{background-color: #ff5a79;}
.gr-app{left: 26.15%;}
.gr-web{left: 50%;}
.gr-game{left: 74.1%;}
.carousel-inner>.item>a>.home-worksimgs{width: 33vw;max-width: 630px;transition: all 1s ease;}
.carousel-inner>.item>a>.home-worksimgs:hover{width: 34vw;max-width: 1630px;}

.creat{position: absolute;bottom:0;left: 5%;min-width: 440px;max-width: 508px;width:30%; }

.skillimg{position: absolute;top: 16%;width: 105%;padding-bottom: 105%;left: -2.5%;z-index: 100;background-repeat:no-repeat;background-size: 100% 100%;}
.skillfonts1{font-family: 'impact';position: absolute;bottom: 9%;left: 10%;color: #fff;font-size: 38px;}
.skillfonts2{font-family: 'impact';position: absolute;bottom: 5%;left: 10%;color: #4d4d58;font-size: 20px;}
.appimg{background-image: url('../images/appimg.png');}
.webimg{background-image: url('../images/webimg.png');}
.gameimg{background-image: url('../images/gameimg.png');}
.gr-skill:hover .appimg{background-image: url('../images/appgif.gif');}
.gr-skill:hover .webimg{background-image: url('../images/appgif.gif');}
.gr-skill:hover .gameimg{background-image: url('../images/appgif.gif');}

.skillmore{font-family: 'impact';position: absolute;top: 87vh;right:5.9%;color: #ff5a79;font-size: 26px;cursor: pointer;transition: color 1s;}
.skillmore:hover{color: #4d4d58;}
.skillmore2{height: 70vh;width: 67.95%;position: absolute;top: 15vh;right: 120%;z-index: 10000;background-color: #282939;transition: right 1.2s;color: #fff;}
.skillmore:hover+.skillmore2{right: 5.9%;}

/*<!-- ↓↓↓↓↓↓↓↓↓↓第4屏↓↓↓↓↓↓↓↓↓↓ -->*/
.thinking04{position: absolute;top: 0;right: 5vw;z-index: 1;max-width: 800px;width: 40vw;z-index: 1;}
.chahua2{width:33.3vw; max-width: 490px;width: 24vw;padding: 10px;}
.chahua{position: absolute;bottom: 28vh;left: 64vw;}
.shangye{position: absolute;bottom: 17vh;left: 64vw;}
.yuanze{position: absolute;bottom: 6vh;left: 64vw;}
.thinkingimg{width: 100%;}
.thinkingbtn{transition: box-shadow 1s;cursor:pointer;z-index: 2;}
.thinkingbtn:hover{box-shadow: 0px 0px 50px #2f436f;}

.home04{height: -webkit-fill-available;position: sticky;left: 0;top: 0;}
.home041000{z-index: 1000;}
.home042000{z-index: 2000;}
.home043000{z-index: 3000;}
.home044000{z-index: 4000;}
.home045000{z-index: 5000;}
.home04star{height: 104vh;position: absolute;left: 0;top: 0;margin-left: -11vh;margin-top: -9vh;}
.home04100{z-index: 100;}
.home04200{z-index: 200;}
.home04300{z-index: 300;}
.home04400{z-index: 400;}

@keyframes myfirst {from {transform:rotate(0deg);}to {transform:rotate(360deg);}}
@-moz-keyframes myfirst {from {transform:rotate(0deg);}to {transform:rotate(360deg);}} /* Firefox */
@-webkit-keyframes myfirst {from {transform:rotate(0deg);}to {transform:rotate(360deg);}} /* Safari 和 Chrome */
@-o-keyframes myfirst{from {transform:rotate(0deg);}to {transform:rotate(360deg);}} /* Opera */
.home04200{
animation: myfirst 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.home04300{animation: myfirst 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;}
.home04400{animation: myfirst 30s;
animation-iteration-count: infinite;
animation-timing-function: linear;}




/*<!-- ↓↓↓↓↓↓↓↓↓↓第5屏↓↓↓↓↓↓↓↓↓↓ -->*/
.fengshengshuiqi{width: 100vw;position:absolute;top: 43.5vh;margin-top: -28.88vw;margin-left: -4vw;}

.beian{width: 100%;height: 13vh;min-height: 100px;position: absolute;bottom: 0;background-color: #191a28;}
.beianlianjie a{font-size:12px;color:#7f7e84;transition: color 1.5s;}
.beianlianjie a:hover{color:#fff}
.beianlianjie{display: inline-block; position:absolute;left:50%;top: 40%;margin-top:-20px;color:#7f7e84;}
.gonghao{cursor: pointer; width: 42px;height: 42px;background-image: url('../images/gonghao.png');position: absolute;top: 50%;margin-top: -21px;right: 54%;transition: background-image 1.5s;}
.gonghao:hover{background-image: url('../images/gonghao2.png');}
.weibo{display: block; cursor: pointer; width: 42px;height: 42px;background-image: url('../images/weibo.png');position: absolute;top: 50%;margin-top: -21px;right: 54%;margin-right:82px; transition: background-image 1.5s;}
.weibo:hover{background-image: url('../images/weibo2.png');}
.xian{width: 2px;height: 46%;position: absolute;top: 27%;left: 48%;background-color: #242532;}

@media (max-width: 820px) {
  .gr-nav {
    display: none;
  }
}

#cursor-container #cursor-outer {
  position: fixed;
  z-index: 65536;
  transform: translate3d(-50%, -50%, 0px);
  height: 36px;
  width: 36px;
  border: 1px solid #ccc;
  border-radius: 50%;
  pointer-events: none;
  transition: background-color 0.3s, width 0.3s, height 0.3s;
}
#cursor-container #cursor-effect {
  position: fixed;
  z-index: 65535;
  transform: translate3d(-50%, -50%, 0px) scale(0);
  height: 80px;
  width: 80px;
  border: 4px solid #ccc;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}