coze_demo/scss/global.scss

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900');

body{
    font-family: 'Montserrat';
/*     letter-spacing: 1px; */
    font-weight: 600;
}

p,
label{ 
    margin: 0;
}

a{
    color: white;
    text-decoration: none;
    transition: .4s;
    outline: none;
    &:active,
    &:visited,
    &:hover,
    &:focus{
      outline: none;
      color: white;
      text-decoration: none;
    }
    &:hover{
        color: $grey;
    }
}


.container{
    width: 100%;
/*     max-width: 1366px; */
    padding: 0 20px;
}

.border{
    border: 1px solid red;
}


.middle{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.middle-right{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.full-middle{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


.pattern{
    background: white;
    background-image: url(../images/pattern.jpg);
    background-repeat: repeat-x;
    background-position: center bottom;
}

.radius{
    border-radius: 3px;
}

.radius-bottom{
    border-radius: 0 0 3px 3px;
}

    
#MainContent{
    top: 50px;
    z-index: 0;
    overflow: hidden;
}

#map{
    width: 100%;
    border-radius: 3px;
    overflow: hidden;
    padding: 10px;
}



#dropLoading{
  display: none;
  position: fixed;
  left: 0;
  top: 50px;
  height: calc(100vh - 50px);
  width: 100%;
  background: rgba(0,0,0,0.8);
  overflow: hidden;


  .box{
    position: fixed;
    height: 220px;
    width: 220px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  
    div{
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: fade 7s linear 0s 1 normal;
    }
    
    .anim {
      animation: pop-up 7s ease-in 0s 1 normal;
    }
    
    .count{
      color: white;
    }
    .text {
      width: 100vw;
      color: white;
      text-align: center;
      font-size: $font-10;
      top: calc(50% + 140px);
    }

    
  }
}



@keyframes pop-up{
  0% {transform: scale(0);}
  10% {transform: scale(1);}
  95% {transform: scale(1);}
  100% {transform: scale(0);}
}
@keyframes fade{
    0% {opacity: 0;}
    10% {opacity: 1;}
    95% {opacity: 1;}
    100% {opacity: 0;}
}