@charset "utf-8";
/* CSS Document */
.opacity_0{opacity:0;}
.opacity_x_0{opacity:0; transform: translateX(-20px);}
.opacity_y_0{opacity:0; transform: translateY(-20px);}
.opacity_y2_0{opacity:0; transform: translateY(20px);}

.titleshow{
    animation-name:fadeInUp; 
    animation-duration:.5s;
    animation-fill-mode:forwards;
}

/*============== home ==============*/
#video_block.show{
         animation-name:fadeIn; 
        animation-duration:.7s;
        animation-delay:0s;
        animation-fill-mode:forwards;
}

ul.app_menu.show{
        animation-name:fadeInUp; 
        animation-duration:.6s;
        animation-delay:.5s;
        animation-fill-mode:forwards;
}


/*============== section1 NEWS ==============*/
#section1 article.show{

        animation-name:fadeInUp; 
        animation-duration:.5s;
        animation-delay:.5s;
        animation-fill-mode:forwards;

}

.btnshow{
    animation-name:zoomin; 
    animation-duration:.25s;
    animation-delay:.9s;
    animation-fill-mode:forwards;
}

/*============== section2 STORY ==============*/
.sec02_slogan01.show{
    animation-name:fadeIn; 
    animation-duration:.45s;
    animation-delay:.9s;
    animation-fill-mode:forwards;
}

.sec02_slogan02.show{
    animation-name:fadeIn; 
    animation-duration:.45s;
    animation-delay:1.2s;
    animation-fill-mode:forwards;
}

.sec02_txt.show{
    animation-name:fadeIn; 
    animation-duration:.45s;
    animation-delay:1.1s;
    animation-fill-mode:forwards;
}

.sec02_cha01.show{
    animation-name:fadeInLt; 
    animation-duration:.5s;
    animation-delay:.5s;
    animation-fill-mode:forwards;
}

.sec02_cha02.show{
    animation-name:fadeInRt; 
    animation-duration:.5s;
    animation-delay:.5s;
    animation-fill-mode:forwards;
}

/*============== section3 CASTS ==============*/
.cha_menu_block.show{
  animation-name:fadeIn; 
  animation-duration:0.1s;
  animation-delay:0s;
  animation-fill-mode:forwards;
}

.cha_menu_block ul.chatype_menu li:nth-of-type(1).show{
        animation-name:fadeInUp; 
        animation-duration:.6s;
        animation-delay:.3s;
        animation-fill-mode:forwards;
}

.cha_menu_block ul.chatype_menu li:nth-of-type(2).show{
        animation-name:fadeUnder; 
        animation-duration:.6s;
        animation-delay:.3s;
        animation-fill-mode:forwards;
}
.cha_menu_block ul.chatype_menu li:nth-of-type(3).show{
        animation-name:fadeInUp; 
        animation-duration:.6s;
        animation-delay:.3s;
        animation-fill-mode:forwards;
}

/*============== section4 FEATURES ==============*/

.pic_block.show{
  animation-name:fadeIn; 
  animation-duration:.5s;
  animation-delay:.5s;
  animation-fill-mode:forwards;
}


/*============== section5 VIDEO ==============*/
.sec05_slogan.show{
        animation-name:fadeIn; 
        animation-duration:.45s;
        animation-delay:.9s;
        animation-fill-mode:forwards;
}
.tv_block.show{
        animation-name:fadeIn; 
        animation-duration:.45s;
        animation-delay:1s;
        animation-fill-mode:forwards;
      }

/*============== section6  COMMUNITY ==============*/
#section6 .con_block.show{
          animation-name: fadeIn;
          animation-duration: .5s;
          animation-delay: .5s;
          animation-fill-mode: forwards;
}

.fb_block.opacity_0,
.twitter_block.opacity_0,
.instagram_block.opacity_0{ opacity:1; }

.fb_block.show,
.twitter_block.show,
.instagram_block.show{ animation-name:none; }


@media screen and (max-width:999px) {	

           /*============== home ==============*/
            #video_block.show{ animation-name:none; }
  
            ul.app_menu.show{
                      animation-name:fadeInUp; 
                      animation-duration:.6s;
                      animation-delay:0s;
                      animation-fill-mode:forwards;
            }
            ul.social_menu.s.show{
                      animation-name:fadeIn; 
                      animation-duration:.6s;
                      animation-delay:.5s;
                      animation-fill-mode:forwards;
            }

}


@media screen and (max-width:900px) {	

           /*============== section2 STORY ==============*/
            .sec02_cha01.show{ animation-name:none; }

            .sec02_cha02.show{
                animation-name:fadeIn; 
                animation-duration:.5s;
                animation-delay:1.1s;
                animation-fill-mode:forwards;
            }

            .sec02_slogan01.show{
                animation-name:fadeIn; 
                animation-duration:.45s;
                animation-delay:.5s;
                animation-fill-mode:forwards;
            }
            
            .sec02_slogan02.show{
                animation-name:fadeIn; 
                animation-duration:.45s;
                animation-delay:0.9s;
                animation-fill-mode:forwards;
            }
            
            .sec02_txt.show{
                animation-name:fadeIn; 
                animation-duration:.45s;
                animation-delay:0.7s;
                animation-fill-mode:forwards;
            }
            

           /*============== section3 CASTS ==============*/
          .cha_menu_block ul.chatype_menu li:nth-of-type(1).show{
              animation-name:fadeInLt; 
          }

          .cha_menu_block ul.chatype_menu li:nth-of-type(2).show{
              animation-name:fadeInRt; 
          }
          .cha_menu_block ul.chatype_menu li:nth-of-type(3).show{
              animation-name:fadeInLt;  
          }

          /*============== section6 COMMUNITY ==============*/   
          .fb_block.opacity_0,
          .twitter_block.opacity_0,
          .instagram_block.opacity_0{ opacity:0; }
          
          .fb_block.show,
          .twitter_block.show,
          .instagram_block.show{ 
                              animation-name:fadeIn; 
                              animation-duration:.45s;
                              animation-delay:.9s;
                              animation-fill-mode:forwards;           
                            }
          #section6 .con_block.opacity_0{ opacity:1; }
           #section6 .con_block.show{ animation-name:none; }
                                          

}  

/*=======fadeIn=======*/
.fadeIn{  animation-name:fadeIn; }
@keyframes fadeIn{
      0%{ opacity:0;}
    100%{ opacity:1; }
}

/*=======fadeInUp=======*/
.fadeInUp{ animation-name: fadeInUp; }
@keyframes fadeInUp{
      0%{
          opacity:0; 
          transform: translateY(20px);
      }
      100%{
          opacity:1; 
          transform: translateY(0);
      }
}

/*=======fadeUnder=======*/
.fadeUnder{ animation-name: fadeUnder;}
@keyframes fadeUnder{
    0%{
        opacity:0; 
        transform: translateY(-20px);
    }

    100%{
        opacity:1; 
        transform: translateY(0);
    }
}


/*=======fadeInLt=======*/
.fadeInLt{ animation-name:fadeInLt; }
@keyframes fadeInLt{
    0%{
        opacity:0; 
        transform: translateX(-20px);
    }

    100%{
        opacity:1; 
        transform: translateX(0);
    }
}


/*=======fadeInRt=======*/
.fadeInRt{ animation-name: fadeInRt; }
@keyframes fadeInRt{
    0%{
        opacity:0; 
        transform: translateX(20px);
    }
    100%{
        opacity:1; 
        transform: translateX(0);
    }
}

/*=======zoomin=======*/
.zoomin{ animation-name:zoomin; }
@keyframes zoomin{
    0% {
        opacity:0; 
        transform: scale(1.5, 1.5);
    }

    100% {
        opacity:1; 
        transform: scale(1, 1);
    }
}

/*======= fadeInblur =======*/
.fadeInblur{ animation-name: fadeInblur;}
@keyframes fadeInblur{
        0%{
         opacity: .1;
        filter: blur(1.2px);
        }

        100%{
          opacity: 1;
        filter: blur(0px);
        }
}