/******************************
EXAMPLE STYLES
******************************/
.noscroll {
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.gtc-title{
  background: url(../images/head_01.png) no-repeat center;
  height:70px; line-height:56px;
  position: absolute; top:0; width: 100%; text-align: center; font-size:2.3rem; color: #fff;/*-webkit-box-reflect:below -26px -webkit-linear-gradient(transparent, transparent 50%, rgba(255, 255, 255, .5))*/
  
}
.gtc-title span{font-size: 14px; position: absolute; top:0; right: 20px;}
.gtc-title span i{font-size: 21px; vertical-align: middle; margin-left: 10px}
/* Main Nav */
.nav {
    width: 90vw;
    max-width: 1200px;
    margin: 0 auto;
    /*height: 100vh;*/
    height: calc(100vh - 200px);
    padding: 22vh 0 24vh;
    /*display:flex;
  flex-wrap: wrap;*/
    justify-content: center;
    align-items: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.nav-el {
  position: relative;
  width:300px;
  color: white;
  z-index: 10;
  height:300px;
  margin-right:-15px;
  margin-top:-15px;
  font-size: 21px;
  display: flex;
  align-items: center;
   /*background: url(../images/k_03.png) no-repeat;*/
  background-size: 100% 100%;
  position:relative;
cursor:pointer;

  animation:bounceIn;
}

.nav-el [class^="icon-"], .nav-el [class*=" icon-"] {
  position: absolute;
  top: 50%;
  left: 50%;
  line-height: 0;
  margin-left: -0.5em;
}

body.dm-demo1 {
  /*background:linear-gradient(-35deg, #00c78c, #007eff);*/
  background: url(../images/bg2.png) no-repeat bottom #016bad;
  background-size:100% 100%;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
.img-dh{position:absolute; top: 20px; left:-150px;width:280px; height: 280px; overflow: hidden;}
.img-dh img{width:280px; height:280px;-webkit-animation: img-dh 5s infinite linear;}
@keyframes img-dh{
  0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg);
    }  
}
.nav-el .nav-el-hover{
    /*background: rgba(0,168,255,.05);*/
  border-radius: 50%;
  width:240px;height:240px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

/*body.dm-demo1 .nav-el::before{ position: absolute; display: block; z-index: -1; content: ""; background: rgba(255, 255, 255, 0.05);   border:1px solid  rgba(255, 255, 255, 0.2); width: 98%; margin: 0 auto; height: 96%; top: 0; left: 0 }
body.dm-demo1 .nav-el::after{ position: absolute; display: block;z-index: -1; content: ""; background: rgba(255, 255, 255, 0.12);    border:1px dotted  rgba(255, 255, 255, 0.5); width: 98%; margin: 0 auto; height: 96%; bottom: 0; right: 0 }*/
body.dm-demo1 .nav-el .nav-el-hover img{max-width:40%; vertical-align: middle; display: block; margin: 0 auto 10px}
body.dm-demo1 .nav-el b{ font-size:14px;font-weight: normal; display: block; font-family: arial; margin-top: 5px}
body.dm-demo1 .nav-el:hover{
background: url(../images/k_03.png) no-repeat;
background-size: 100% 100%;

  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
  /*background:linear-gradient(-145deg, #007eff, #00c888);*/
}
body.dm-demo1 .nav-el:hover .nav-el-hover{
  -webkit-animation: fa2-spin 2s infinite linear;
  animation: fa2-spin 2s infinite linear;
  transition: background-color .3s ease-in;
  -moz-transition: background-color .3s ease-in;
  -webkit-transition: background-color .3s ease-in;
  background: rgba(0,168,255,.5);
}
body.dm-demo1 .nav-el.active .nav-el-hover{background: rgba(0,168,255,.8);}
body.dm-demo1 .nav-el:hover .nav-el-hover img{width: 30%;}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa2-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-359deg);
    transform: rotate(-359deg);
  }
}
.shine,.shine-1,.shine-2,.shine-3 {
    background: url(../images/star.png) no-repeat center;
    background-size: 100% 100%;
    width: 100px;
    height: 100px;
    position: absolute;
    right: 30vw; bottom: 12vh;
    animation: opacity-change 1.5s ease-in-out infinite;
    -webkit-animation: opacity-change 1.5s ease-in-out infinite;
    -moz-animation: opacity-change 1.5s ease-in-out infinite;
    -o-animation: opacity-change 1.5s ease-in-out infinite;
  }
  .shine-1,.shine-3 {
    background: url(../images/star.png) no-repeat center;
    background-size: 100% 100%;
    width: 100px;
    height: 100px;
    position: absolute;
    right: 30vw; bottom: 12vh;
    animation: opacity-change2 1.5s ease-in-out infinite;
    -webkit-animation: opacity-change2 1.5s ease-in-out infinite;
    -moz-animation: opacity-change2 1.5s ease-in-out infinite;
    -o-animation: opacity-change2 1.5s ease-in-out infinite;
  }
.shine-1{left: 35vw; bottom: 5px; width: 70px; height: 70px;transform:rotate(-60deg);}
.shine-2{left: 42vw; bottom: 15vh; width: 50px; height: 50px;transform:rotate(-120deg);}
.shine-3{right: 42vw; bottom: 7vh; width: 50px; height: 50px;transform:rotate(138deg);}
@keyframes opacity-change {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes opacity-change2 {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

@media screen and (max-width: 1366px){
  /*.gtc-title{font-size: 2.5rem; top: 4.1vh}*/
  .nav{max-width: 1000px}
 .nav-el{width: 250px; height: 250px; font-size: 18px}
 body.dm-demo1 .nav-el b{font-size:12px}
 body.dm-demo1 .nav-el .nav-el-hover img{max-width:25%}
}

.nav-select {
    margin-bottom: calc(100vh * 80 / 1080);
}

    .nav-select ul {
        display: flex;
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

        .nav-select ul li {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: calc(100vh * 10 / 1080) calc(100vh * 40 / 1080);
            cursor: pointer;
        }

            .nav-select ul li:nth-child(1) img {
                width: calc(100vh * 92 / 1080);
            }

            .nav-select ul li img {
                width: calc(100vh * 78 / 1080);
            }

            .nav-select ul li span {
                display: inline-block;
                position: relative;
                margin-top: calc(100vh * 30 / 1080);
                font-size: calc(100vh * 23 / 1080);
                color: #fff;
                text-align: center;
                font-weight: 500;
            }
            .nav-select ul li.active span::before {
                content: "";
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: calc(100vh * 186 / 1080);
                height: calc(100vh * 79 / 1080);
                background-image: url(../images/p-nav-hover.svg);
                background-size: 100% 100%;
            }
            .nav-select ul li.active span {
                color: #ffdda1;
            }
.hide {
display:none;
}