@charset "utf-8";
/* CSS Document */

div.clickEffect {
  position: fixed;
  box-sizing: border-box;
  border-style: solid;
  border-color: #ff0;
  border-radius: 50%;
  animation: clickEffect 0.4s ease-out;
  z-index: 99999;
}
@keyframes clickEffect {
  0% {
    opacity: 1;
    width: 0.5em;
    height: 0.5em;
    margin: -0.25em;
    border-width: 0.5rem;
  }
  100% {
    opacity: 0.2;
    width: 15em;
    height: 15em;
    margin: -7.5em;
    border-width: 0.03rem;
  }
}

.menu {
  animation: mmenu 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
  margin-top: -50px;
  opacity: 0;
}
@keyframes mmenu {
  from {
    margin-top: -40px;
    opacity: 0;
  }
  to {
    margin-top: 20px;
    opacity: 1;
  }
}

.loading {
  animation: mloading 1.5s;
  animation-fill-mode: forwards;
  animation-delay: 0.8s;
  opacity: 0;
}
@keyframes mloading {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.Loading {
  animation: mLoading 2s;
  animation-fill-mode: forwards;
  animation-delay: 2.5s;
  width: 0%;
  margin-left: 2%;
}
@keyframes mLoading {
  from {
    width: 0%;
    margin-left: 2%;
  }
  to {
    width: 94%;
    margin-left: 2%;
  }
}

.loading-Hide {
  animation: mloading-Hide 1s;
  animation-fill-mode: backwards;
  animation-delay: 0.5s;
  opacity: 1;
}
@keyframes mloading-Hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.navigations {
  animation: mnavigations 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
  opacity: 0;
  margin-top: 40px;
}
@keyframes mnavigations {
  from {
    opacity: 0;
    margin-top: 40px;
  }
  to {
    opacity: 1;
    margin-top: -40px;
  }
}

.all {
  animation: mall 1.3s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
  left: -50%;
  opacity: 0;
}
@keyframes mall {
  from {
    left: -50%;
    opacity: 0;
  }
  to {
    left: 50%;
    opacity: 1;
  }
}

.copy {
  animation: mcopy 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
  margin-top: 80px;
  opacity: 0;
}
@keyframes mcopy {
  from {
    margin-top: 80px;
    opacity: 0;
  }
  to {
    margin-top: -78px;
    opacity: 1;
  }
}

.copy-Footer {
  animation: mcopy-Footer 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
  height: 0px;
  margin-top: 0px;
}
@keyframes mcopy-Footer {
  from {
    height: 0px;
    margin-top: 0px;
  }
  to {
    height: 100px;
    margin-top: -100px;
  }
}

.copy-Footer-Hide {
  animation: mcopy-Footer-Hide 1s;
  animation-fill-mode: backwards;
  animation-delay: 0.2s;
  height: 100px;
  margin-top: -100px;
}
@keyframes mcopy-Footer-Hide {
  from {
    height: 100px;
    margin-top: -100px;
  }
  to {
    height: 0px;
    margin-top: 0px;
  }
}

.page-Title {
  animation: mpage-Title 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
  top: 70px;
  opacity: 0;
}
@keyframes mpage-Title {
  from {
    top: 70px;
    opacity: 0;
  }
  to {
    top: 100px;
    opacity: 1;
  }
}

.page-Do {
  animation: mpage-Do 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.8s;
  top: 100px;
  opacity: 0;
}
@keyframes mpage-Do {
  from {
    top: 100px;
    opacity: 0;
  }
  to {
    top: 130px;
    opacity: 1;
  }
}

.page-Wait {
  animation: mdesign-Wait 1s;
  animation-fill-mode: forwards;
  animation-delay: 1s;
  top: 150px;
  opacity: 0;
}
@keyframes mdesign-Wait {
  from {
    top: 150px;
    opacity: 0;
  }
  to {
    top: 180px;
    opacity: 1;
  }
}

.location-Wait {
  animation: mlocation-Wait 1s;
  animation-fill-mode: forwards;
  animation-delay: 1s;
  top: 150px;
  opacity: 0;
}
@keyframes mlocation-Wait {
  from {
    top: 150px;
    opacity: 0;
  }
  to {
    top: 180px;
    opacity: 1;
  }
}

.employee-Wait {
  animation: memployee-Wait 1s;
  animation-fill-mode: forwards;
  animation-delay: 1.2s;
  top: 150px;
  opacity: 0;
}
@keyframes memployee-Wait {
  from {
    top: 150px;
    opacity: 0;
  }
  to {
    top: 180px;
    opacity: 1;
  }
}

.comment-Wait {
  animation: mcomment-Wait 1s;
  animation-fill-mode: forwards;
  animation-delay: 1.4s;
  top: 150px;
  opacity: 0;
}
@keyframes mcomment-Wait {
  from {
    top: 150px;
    opacity: 0;
  }
  to {
    top: 180px;
    opacity: 1;
  }
}

.page-Lang {
  animation: mpage-Lang 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.8s;
  margin-top: 83px;
}
@keyframes mpage-Lang {
  from {
    margin-top: 83px;
  }
  to {
    margin-top: -83px;
  }
}

.settings {
  animation: msettings 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.8s;
  top: -10%;
}
@keyframes msettings {
  from {
    top: -10%;
  }
  to {
    top: 2%;
  }
}

.copy-Header {
  animation: mcopy-Header 0.8s;
  animation-fill-mode: forwards;
  animation-delay: 0.1s;
  margin-top: -120px;
}
@keyframes mcopy-Header {
  from {
    margin-top: -120px;
  }
  to {
    margin-top: 0px;
  }
}

.copy-Header-Hide {
  animation: mcopy-Header-Hide 0.5s;
  animation-fill-mode: backwards;
  animation-delay: 0.1s;
  margin-top: 0px;
}
@keyframes mcopy-Header-Hide {
  from {
    margin-top: 0px;
  }
  to {
    margin-top: -120px;
  }
}

.PC-Cover {
  animation: mPC-Cover 0.5s;
  animation-fill-mode: forwards;
  animation-delay: 0.1s;
  opacity: 0;
}
@keyframes mPC-Cover {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.PC-Cover-Hide {
  animation: mPC-Cover-Hide 0.5s;
  animation-fill-mode: backwards;
  animation-delay: 0.1s;
  opacity: 1;
}
@keyframes mPC-Cover-Hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.PC1 {
  animation: mPC1 1s;
  animation-fill-mode: forwards;
  animation-delay: 1.3s;
  opacity: 0;
}
@keyframes mPC1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.PC2 {
  animation: mPC2 1s;
  animation-fill-mode: forwards;
  animation-delay: 1.5s;
  opacity: 0;
}
@keyframes mPC2 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.PC3 {
  animation: mPC3 1s;
  animation-fill-mode: forwards;
  animation-delay: 1.7s;
  opacity: 0;
}
@keyframes mPC3 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.PC4 {
  animation: mPC4 1s;
  animation-fill-mode: forwards;
  animation-delay: 1.9s;
  opacity: 0;
}
@keyframes mPC4 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.PC5 {
  animation: mPC5 1s;
  animation-fill-mode: forwards;
  animation-delay: 2.1s;
  opacity: 0;
}
@keyframes mPC5 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.PC6 {
  animation: mPC6 1s;
  animation-fill-mode: forwards;
  animation-delay: 2.3s;
  opacity: 0;
}
@keyframes mPC6 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.design-Form {
  animation: mesign-Form 1.2s;
  animation-fill-mode: forwards;
  animation-delay: 0.3s;
  left: -50%;
}
@keyframes mesign-Form {
  from {
    left: -50%;
  }
  to {
    left: 50%;
  }
}

.design-Form-Hide {
  animation: mesign-Form-Hide 1.2s;
  animation-fill-mode: backwards;
  animation-delay: 0.3s;
  left: 50%;
}
@keyframes mesign-Form-Hide {
  from {
    left: 50%;
  }
  to {
    left: -50%;
  }
}

.BDF1 {
  animation: mBDF1 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
  margin-top: -31px;
}
@keyframes mBDF1 {
  from {
    margin-top: -31px;
  }
  to {
    margin-top: 31px;
  }
}

.BDF1-Hide {
  animation: mBDF1-Hide 1s;
  animation-fill-mode: backwards;
  animation-delay: 0.5s;
  margin-top: 31px;
}
@keyframes mBDF1-Hide {
  from {
    margin-top: 31px;
  }
  to {
    margin-top: -31px;
  }
}

.BDF2 {
  animation: mBDF2 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
  left: -50px;
}
@keyframes mBDF2 {
  from {
    left: -50px;
  }
  to {
    left: 50px;
  }
}

.BDF2-Hide {
  animation: mBDF2-Hide 1s;
  animation-fill-mode: backwards;
  animation-delay: 0.5s;
  left: 50px;
}
@keyframes mBDF2-Hide {
  from {
    left: 50px;
  }
  to {
    left: -50px;
  }
}

.error-Txt {
  animation: merror-Txt 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
  top: -100%;
}
@keyframes merror-Txt {
  from {
    top: -100%;
  }
  to {
    top: 20%;
  }
}

.error-Txt-Hide {
  animation: merror-Txt-Hide 1s;
  animation-fill-mode: backwards;
  animation-delay: 0.2s;
  top: 20%;
}
@keyframes merror-Txt-Hide {
  from {
    top: 20%;
  }
  to {
    top: -100%;
  }
}

.confirm-Txt {
  animation: mconfirm-Txt 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
  top: -100%;
}
@keyframes mconfirm-Txt {
  from {
    top: -100%;
  }
  to {
    top: 30%;
  }
}

.confirm-Txt-Hide {
  animation: mconfirm-Txt-Hide 1s;
  animation-fill-mode: backwards;
  animation-delay: 0.2s;
  top: 30%;
}
@keyframes mconfirm-Txt-Hide {
  from {
    top: 30%;
  }
  to {
    top: -100%;
  }
}

.DS-Back {
  animation: mDS-Back 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
  margin-left: -50px;
}
@keyframes mDS-Back {
  from {
    margin-left: -50px;
  }
  to {
    margin-left: 50px;
  }
}

.DS-Top {
  animation: mDS-Top 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
  margin-top: 80px;
}
@keyframes mDS-Top {
  from {
    margin-top: 80px;
  }
  to {
    margin-top: -80px;
  }
}

.DS-TitleGray {
  animation: mDS-TitleGray 0.8s;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
  margin-top: 70px;
  opacity: 0;
}
@keyframes mDS-TitleGray {
  from {
    margin-top: 70px;
    opacity: 0;
  }
  to {
    margin-top: 100px;
    opacity: 1;
  }
}

.DS-TitleBlack {
  animation: mDS-TitleBlack 0.8s;
  animation-fill-mode: forwards;
  animation-delay: 0.4s;
  margin-top: 100px;
  opacity: 0;
}
@keyframes mDS-TitleBlack {
  from {
    margin-top: 100px;
    opacity: 0;
  }
  to {
    margin-top: 130px;
    opacity: 1;
  }
}

.DS-DS1 {
  animation: mDS-DS1 0.8s;
  animation-fill-mode: forwards;
  animation-delay: 1.3s;
  margin-top: -20px;
  opacity: 0;
}
@keyframes mDS-DS1 {
  from {
    margin-top: -20px;
    opacity: 0;
  }
  to {
    margin-top: 0px;
    opacity: 1;
  }
}

.DS-DS4 {
  animation: mDS-DS4 0.8s;
  animation-fill-mode: forwards;
  animation-delay: 1.5s;
  margin-top: 0px;
  opacity: 0;
}
@keyframes mDS-DS4 {
  from {
    margin-top: 0px;
    opacity: 0;
  }
  to {
    margin-top: 20px;
    opacity: 1;
  }
}

.DS-DS10 {
  animation: mDS-DS10 0.8s;
  animation-fill-mode: forwards;
  animation-delay: 1.7s;
  margin-top: 0px;
  opacity: 0;
}
@keyframes mDS-DS10 {
  from {
    margin-top: 0px;
    opacity: 0;
  }
  to {
    margin-top: 20px;
    opacity: 1;
  }
}

.DS-DS2 {
  animation: mDS-DS2 0.8s;
  animation-fill-mode: forwards;
  animation-delay: 1.5s;
  margin-top: -20px;
  opacity: 0;
}
@keyframes mDS-DS2 {
  from {
    margin-top: -20px;
    opacity: 0;
  }
  to {
    margin-top: 0px;
    opacity: 1;
  }
}

.DS-DS7 {
  animation: mDS-DS7 0.8s;
  animation-fill-mode: forwards;
  animation-delay: 1.7s;
  margin-top: 0px;
  opacity: 0;
}
@keyframes mDS-DS7 {
  from {
    margin-top: 0px;
    opacity: 0;
  }
  to {
    margin-top: 20px;
    opacity: 1;
  }
}

.DS-DS9 {
  animation: mDS-DS9 0.8s;
  animation-fill-mode: forwards;
  animation-delay: 1.9s;
  margin-top: 0px;
  opacity: 0;
}
@keyframes mDS-DS9 {
  from {
    margin-top: 0px;
    opacity: 0;
  }
  to {
    margin-top: 20px;
    opacity: 1;
  }
}

.DS-DS3 {
  animation: mDS-DS3 0.8s;
  animation-fill-mode: forwards;
  animation-delay: 1.7s;
  margin-top: -20px;
  opacity: 0;
}
@keyframes mDS-DS3 {
  from {
    margin-top: -20px;
    opacity: 0;
  }
  to {
    margin-top: 0px;
    opacity: 1;
  }
}

.DS-DS5 {
  animation: mDS-DS5 0.8s;
  animation-fill-mode: forwards;
  animation-delay: 1.9s;
  margin-top: 0px;
  opacity: 0;
}
@keyframes mDS-DS5 {
  from {
    margin-top: 0px;
    opacity: 0;
  }
  to {
    margin-top: 20px;
    opacity: 1;
  }
}

.DS-DS6 {
  animation: mDS-DS6 0.8s;
  animation-fill-mode: forwards;
  animation-delay: 2.1s;
  margin-top: 0px;
  opacity: 0;
}
@keyframes mDS-DS6 {
  from {
    margin-top: 0px;
    opacity: 0;
  }
  to {
    margin-top: 20px;
    opacity: 1;
  }
}

.DS-DS8 {
  animation: mDS-DS8 0.8s;
  animation-fill-mode: forwards;
  animation-delay: 2.3s;
  margin-top: 0px;
  opacity: 0;
}
@keyframes mDS-DS8 {
  from {
    margin-top: 0px;
    opacity: 0;
  }
  to {
    margin-top: 20px;
    opacity: 1;
  }
}

.PF {
  animation: mPF 1.2s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
  left: -50%;
}
@keyframes mPF {
  from {
    left: -50%;
  }
  to {
    left: 50%;
  }
}

.PF-Hide {
  animation: mPF-Hide 1.2s;
  animation-fill-mode: backwards;
  animation-delay: 0.5s;
  left: 50%;
}
@keyframes mPF-Hide {
  from {
    left: 50%;
  }
  to {
    left: -50%;
  }
}

.TOP {
  animation: mTOP 1.2s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
  margin-top: 65px;
}
@keyframes mTOP {
  from {
    margin-top: 65px;
  }
  to {
    margin-top: -65px;
  }
}

.TOP-Hide {
  animation: mTOP-Hide 1.2s;
  animation-fill-mode: backwards;
  animation-delay: 0.5s;
  margin-top: -65px;
}
@keyframes mTOP-Hide {
  from {
    margin-top: -65px;
  }
  to {
    margin-top: 65px;
  }
}

.confirmCode-Txt {
  animation: mconfirmCode-Txt 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
  top: -100%;
}
@keyframes mconfirmCode-Txt {
  from {
    top: -100%;
  }
  to {
    top: 30%;
  }
}

.confirmCode-Txt-Hide {
  animation: mconfirmCode-Txt-Hide 1s;
  animation-fill-mode: backwards;
  animation-delay: 0.2s;
  top: 30%;
}
@keyframes mconfirmCode-Txt-Hide {
  from {
    top: 30%;
  }
  to {
    top: -100%;
  }
}

.PC22 {
  animation: mPC22 1s;
  animation-fill-mode: forwards;
  animation-delay: 1.5s;
  opacity: 0;
}
@keyframes mPC22 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.P-All-Left {
  animation: mP-All-Left 0.8s;
  animation-fill-mode: forwards;
  animation-delay: 2s;
  opacity: 0;
}
@keyframes mP-All-Left {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.P-All-Center {
  animation: mP-All-Center 0.8s;
  animation-fill-mode: forwards;
  animation-delay: 2.2s;
  opacity: 0;
}
@keyframes mP-All-Center {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.P-All-Right {
  animation: mP-All-Right 0.8s;
  animation-fill-mode: forwards;
  animation-delay: 2.4s;
  opacity: 0;
}
@keyframes mP-All-Right {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.DA {
  animation: mDA 2s;
  animation-fill-mode: forwards;
  animation-delay: 1.8s;
  opacity: 0;
}
@keyframes mDA {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.support-Back1 {
  animation: msupport-Back1 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
  margin-left: -50px;
}
@keyframes msupport-Back1 {
  from {
    margin-left: -50px;
  }
  to {
    margin-left: 50px;
  }
}

.support-Back2 {
  animation: msupport-Back2 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
  top: -4.4%;
}
@keyframes msupport-Back2 {
  from {
    top: -4.4%;
  }
  to {
    top: 4.4%;
  }
}

.support-Back1-Hide {
  animation: msupport-Back1-Hide 1s;
  animation-fill-mode: backwards;
  animation-delay: 0.5s;
  margin-left: 50px;
}
@keyframes msupport-Back1-Hide {
  from {
    margin-left: 50px;
  }
  to {
    margin-left: -50px;
  }
}

.support-Back2-Hide {
  animation: msupport-Back2-Hide 1s;
  animation-fill-mode: backwards;
  animation-delay: 0.5s;
  top: 4.4%;
}
@keyframes msupport-Back2-Hide {
  from {
    top: 4.4%;
  }
  to {
    top: -4.4%;
  }
}

.support {
  animation: msupport 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
  left: -110%;
}
@keyframes msupport {
  from {
    left: -110%;
  }
  to {
    left: 10%;
  }
}

.support-Hide {
  animation: msupport-Hide 1.5s;
  animation-fill-mode: backwards;
  animation-delay: 0.5s;
  left: 10%;
}
@keyframes msupport-Hide {
  from {
    left: 10%;
  }
  to {
    left: -110%;
  }
}

.location-Setting {
  animation: location-Setting 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
  top: -20px;
}
@keyframes location-Setting {
  from {
    top: -20px;
  }
  to {
    top: 20px;
  }
}

.location-Back {
  animation: location-Back 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
  top: -20px;
}
@keyframes location-Back {
  from {
    top: -20px;
  }
  to {
    top: 20px;
  }
}

.location-Loading {
  animation: location-Loading 8s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
  width: 0px;
}
@keyframes location-Loading {
  from {
    width: 0px;
  }
  to {
    width: 200px;
  }
}

.employee-DS-Back {
  animation: memployee-DS-Back 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
  margin-left: 50px;
}
@keyframes memployee-DS-Back {
  from {
    margin-left: 50px;
  }
  to {
    margin-left: -50px;
  }
}

.employee-Cover {
  animation: memployee-Cover 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
  left: -50%;
}
@keyframes memployee-Cover {
  from {
    left: -50%;
  }
  to {
    left: 0px;
  }
}

.employee-Page-Lang {
  animation: memployee-Page-Lang 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.8s;
  margin-top: 83px;
}
@keyframes memployee-Page-Lang {
  from {
    margin-top: 83px;
  }
  to {
    margin-top: -65px;
  }
}

.cover-Employee {
  animation: mcover-Employee 1.2s;
  animation-fill-mode: forwards;
  animation-delay: 1s;
  opacity: 0;
  margin-top: 80px;
}
@keyframes mcover-Employee {
  from {
    opacity: 0;
    margin-top: 80px;
  }
  to {
    opacity: 1;
    margin-top: 100px;
  }
}