@charset "UTF-8";

/*****************************
loding_keyboard_anime1
*****************************/
.loading1{
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  text-align:center;
  height: 100vh;
  width: 100%;
  z-index: 99999999999;
}
.loading1 svg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 70%;
}
.loading1 .skipbtn{
  position: absolute;
  left: 0;
  bottom: 1rem;
  text-align: center;
  width: 100%;
}

.loading1 #serch,
.loading1 .st1,
.loading1 .st2,
.loading1 .st3 {
  opacity: 0;
}

.loading1 .st1 {
  fill: #fff;
  stroke: #ccc;
  stroke-miterlimit: 10;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: keyboardanime 3s linear forwards;
}
.loading1 .key_shift {
  animation: keyboardanime 1.2s linear forwards;
}
.loading1 #key_space {
  animation: keyboardanime 1s linear forwards;
}
.loading1.active .st1 {
  opacity: 1;
}

.loading1 .st3  {
  fill: #999;
  fill: #fff;
}
.loading1 #M .st3 { animation: .5s keyanime1 1.2s linear forwards; }
.loading1 #E .st3 { animation: .5s keyanime1 1.5s linear forwards; }
.loading1 #T .st3 { animation: .5s keyanime1 1.8s linear forwards; }
.loading1 #A .st3 { animation: .5s keyanime1 2.1s linear forwards; }
.loading1 #H .st3 { animation: .5s keyanime1 2.4s linear forwards; }
.loading1 #O .st3 { animation: .5s keyanime1 2.7s linear forwards; }
.loading1 #L .st3 { animation: .5s keyanime1 3s linear forwards; }
.loading1 #I .st3 { animation: .5s keyanime1 3.3s linear forwards; }
.loading1 #C .st3 { animation: .5s keyanime1 3.6s linear forwards; }

.loading1 .st2 {
  fill: #8c8c8c;
  fill: #fff;
  transition: 1.5s;
  transition-delay: 3.5s;
}
.loading1.active .st2 {
  opacity: 1;
}

.loading1 #key_M{ animation: keyboardanime 3s linear forwards, .8s keyanime2 1.2s linear forwards; }
.loading1 #key_E{ animation: keyboardanime 3s linear forwards, .8s keyanime2 1.5s linear forwards; }
.loading1 #key_T{ animation: keyboardanime 3s linear forwards, .8s keyanime2 1.8s linear forwards; }
.loading1 #key_A{ animation: keyboardanime 3s linear forwards, .8s keyanime2 2.1s linear forwards; }
.loading1 #key_H{ animation: keyboardanime 3s linear forwards, .8s keyanime2 2.4s linear forwards; }
.loading1 #key_O{ animation: keyboardanime 3s linear forwards, .8s keyanime2 2.7s linear forwards; }
.loading1 #key_L{ animation: keyboardanime 3s linear forwards, .8s keyanime2 3s linear forwards; }
.loading1 #key_I{ animation: keyboardanime 3s linear forwards, .8s keyanime2 3.3s linear forwards; }
.loading1 #key_C{ animation: keyboardanime 3s linear forwards, .8s keyanime2 3.6s linear forwards; }
.loading1 #key_enter{ animation: keyboardanime 3s linear forwards, .8s keyanime2 4.5s linear forwards; }


.loading1.active #serch {
  opacity: 1;
  transition: 1.5s;
  transition-delay: .5s;
}
.loading1 .st0 {
  stroke: #999;
  stroke-width: 2px;
}
.loading1 #serchbox {
  fill: rgba(222, 226, 227, 0.6);
  fill: none;
  stroke: none;
}
.loading1 #serchtxt path{
  fill: #505050;
  opacity: 0;
}
.loading1.active #serchtxt path{
  opacity: 1;
}
.loading1 #serchtxt #s_m{
  transition-delay: 1.2s;
}
.loading1 #serchtxt #s_e{
  transition-delay: 1.5s;
}
.loading1 #serchtxt #s_t{
  transition-delay: 1.8s;
}
.loading1 #serchtxt #s_a{
  transition-delay: 2.1s;
}
.loading1 #serchtxt #s_h{
  transition-delay: 2.4s;
}
.loading1 #serchtxt #s_o{
  transition-delay: 2.7s;
}
.loading1 #serchtxt #s_l{
  transition-delay: 3s;
}
.loading1 #serchtxt #s_i{
  transition-delay: 3.3s;
}
.loading1 #serchtxt #s_c{
  transition-delay: 3.6s;
}

.loading1 #serchline line{
  opacity: 0;
}
.loading1.active #serchline line:nth-of-type(1){
  animation: .5s serchlineanime 1.2s linear forwards;
}
.loading1.active #serchline line:nth-of-type(2){
  animation: .5s serchlineanime 1.5s linear forwards;
}
.loading1.active #serchline line:nth-of-type(3){
  animation: .5s serchlineanime 1.8s linear forwards;
}
.loading1.active #serchline line:nth-of-type(4){
  animation: .5s serchlineanime 2.1s linear forwards;
}
.loading1.active #serchline line:nth-of-type(5){
  animation: .5s serchlineanime 2.4s linear forwards;
}
.loading1.active #serchline line:nth-of-type(6){
  animation: .5s serchlineanime 2.7s linear forwards;
}
.loading1.active #serchline line:nth-of-type(7){
  animation: .5s serchlineanime 3s linear forwards;
}
.loading1.active #serchline line:nth-of-type(8){
  animation: .5s serchlineanime 3.3s linear forwards;
}
.loading1.active #serchline line:nth-of-type(9){
  animation: .5s serchlineanime 3.6s linear forwards;
}


@keyframes keyboardanime {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes keyanime1 {
  0% {
    fill: #999;
    opacity: 0;
  }
  25% {
    fill: #fff;
    opacity: 1;
  }
  75% {
    fill: #fff;
    opacity: 1;
  }
  100% {
    fill: #999;
    opacity: 0;
  }
}
@keyframes keyanime2 {
  0% {
    fill: #fff;
  }
  50% {
    fill: #ccc;
  }
  100% {
    fill: #fff;
  }
}
@keyframes serchlineanime {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .loading1 svg{
    width: 90%;
  }
}

/*****************************
loding_keyboard_anime2
*****************************/
.loading2{
  background: #c6c6c6;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  text-align:center;
  height: 100vh;
  width: 100%;
  z-index: 99999999999;
}
.loading2 svg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 100%;
  width: 80%;
}
.loading2 svg g{
  opacity: 0;
  transform: scale(0);
  transform-origin: right;
}
/* .loading2.active svg {
  top: 50%;
} */
.loading2.active svg g.act{
  transform: scale(1);
  transition: 1s;
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .loading2 svg{
    width: 90%;
  }
}