@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@font-face{font-family:ffb;src:url(font/Roboto-Bold.ttf)}
@font-face{font-family:fftd;src:url(font/UTM-Androgyne.ttf)}
@font-face{font-family:avo;src:url(font/SVN-Avo.ttf)}
@font-face{font-family:avoB;src:url(font/SVN-Avo-bold.ttf)}
@font-face{font-family:ro;src:url(font/Roboto-Regular.ttf)}
@font-face{font-family:rob;src:url(font/Roboto-Bold.ttf)}
@keyframes light-left {
0%{left:-5%;opacity:0}
50%{left:50%;opacity:1}
100%{left:105%;opacity:0}
}
@keyframes light-right {
0%{right:-5%;opacity:0}
50%{right:50%;opacity:1}
100%{right:105%;opacity:0}
}
@keyframes translateWelcome1 {
0%{transform:translateX(50%);opacity:0}
75%{transform:translateX(50%);opacity:0}
100%{transform:translateX(0)}
}
@keyframes translateWelcome2 {
0%{transform:translateX(-50%);opacity:0}
75%{transform:translateX(-50%);opacity:0}
100%{transform:translateX(0)}
}
@keyframes TranslateXProject1 {
0%{transform:translateX(1000px)}
100%{transform:translateX(0)}
}
@keyframes TranslateXProject2 {
0%{transform:translateX(3000px)}
100%{transform:translateX(0)}
}
@keyframes TranslateXProject3 {
0%{transform:translateX(5000px)}
100%{transform:translateX(0)}
}
@keyframes itemTranslateShow {
0%{opacity:0;transform:translateX(300px)}
100%{transform:translateX(0)}
}
@keyframes itemTranslateShow2 {
0%{opacity:0;transform:translateX(-1000px)}
100%{transform:translateX(0)}
}
@keyframes fadeAvatardown {
0%{opacity:0;transform:translateX(-20px)}
100%{transform:translateX(0)}
}
@keyframes itemRemoveShow {
0%{transform:translateX(0)}
100%{opacity:0;transform:translateX(-1000px)}
}
@keyframes itemHover {
10%,90%{transform:translate3d(-1px,0,0)}
20%,80%{transform:translate3d(2px,0,0)}
30%,50%,70%{transform:translate3d(-4px,0,0)}
40%,60%{transform:translate3d(4px,0,0)}
}
@keyframes phone-icon {
0%{transform:translate3d(0px,0,0)}
2%{transform:translate3d(2px,0,0)}
4%{transform:translate3d(-2px,0,0)}
6%{transform:translate3d(2px,0,0)}
8%{transform:translate3d(-2px,0,0)}
10%{transform:translate3d(2px,0,0)}
12%{transform:translate3d(-2px,0,0)}
14%{transform:translate3d(2px,0,0)}
16%{transform:translate3d(-2px,0,0)}
18%{transform:translate3d(2px,0,0)}
20%{transform:translate3d(-2px,0,0)}
22%{transform:translate3d(2px,0,0)}
24%{transform:translate3d(-2px,0,0)}
26%{transform:translate3d(2px,0,0)}
28%{transform:translate3d(-2px,0,0)}
30%{transform:translate3d(2px,0,0)}
32%{transform:translate3d(-2px,0,0)}
34%{transform:translate3d(2px,0,0)}
36%{transform:translate3d(-2px,0,0)}
38%{transform:translate3d(2px,0,0)}
40%{transform:translate3d(-2px,0,0)}
42%{transform:translate3d(2px,0,0)}
44%{transform:translate3d(-2px,0,0)}
46%{transform:translate3d(0em,0,0)}
}
@keyframes phone-inner {
0%{opacity:1;-webkit-transform:translate3d(0,0,0) scale(0);transform:translate3d(0,0,0) scale(0)}
33.3333%{opacity:0 -webkit-transform: translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1)}
66.6666%{opacity:0;-webkit-transform:translate3d(0,0,0) scale(0);transform:translate3d(0,0,0) scale(0)}
100%{opacity:0;-webkit-transform:translate3d(0,0,0) scale(0);transform:translate3d(0,0,0) scale(0)}
}
@keyframes phone-outer {
0%{-webkit-transform:translate3d(0,0,0) scale(1);opacity:.4;transform:translate3d(0,0,0) scale(1)}
33.3333%{-webkit-transform:translate3d(0,0,0) scale(2);opacity:0;transform:translate3d(0,0,0) scale(2)}
66.6666%{-webkit-transform:translate3d(0,0,0) scale(1);opacity:0;transform:translate3d(0,0,0) scale(1)}
100%{-webkit-transform:translate3d(0,0,0) scale(1);opacity:0;transform:translate3d(0,0,0) scale(1)}
}
@keyframes marquee {
0%{transform:translateX(100%)}
100%{transform:translateX(-100%)}
}
@keyframes zoomGiaGia {
0%{transform:scale(1)}
50%{transform:scale(1.1)}
100%{transform:scale(1)}
}
@keyframes zoomIn {
0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
50%{opacity:1}
}
.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}

.hotline-phone-ring-wrap{position:fixed;bottom: 10px;left:0;z-index: 99;}
.hotline-phone-ring-wrap.phone{bottom:70px}.hotline-phone-ring-wrap.zalo{bottom:130px}.hotline-phone-ring-wrap.zalo2{bottom:190px}.hotline-phone-ring-wrap.whatapp{bottom:250px}
.hotline-phone-ring-wrap.kakao{bottom:310px}.hotline-phone-ring-wrap.viber{bottom:370px}
.hotline-phone-ring{position:relative;visibility:visible;background-color:transparent;width:60px;height:60px;cursor:pointer;z-index:11;-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);transition:visibility .5s;left:0;bottom:0;display:block}
.hotline-phone-ring-circle{width:60px;height:60px;top:0;left:0;position:absolute;background-color:red;border-radius:100%;border:2px solid red;animation:phonering-alo-circle-anim 1.2s infinite ease-in-out;transition:all .5s;transform-origin:50% 50%;opacity:.5}
.zalo .hotline-phone-ring-circle{background-color:#0182ca;border-color:#0182ca;}
.whatapp .hotline-phone-ring-circle{background-color:#1bd741;border-color:#1bd741;}
.kakao .hotline-phone-ring-circle{background-color:#FEE500;border-color:#FEE500;}
.viber .hotline-phone-ring-circle{background-color:#7d3daf;border-color:#7d3daf;}
.hotline-phone-ring-circle-fill{width:50px;height:50px;top:5px;left:5px;position:absolute;background-color:red;border-radius:100%;border:2px solid transparent;animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;transition:all .5s;transform-origin:50% 50%}
.zalo .hotline-phone-ring-circle-fill{background-color:#0182ca;}
.whatapp .hotline-phone-ring-circle-fill{background-color:#1bd741;}
.kakao .hotline-phone-ring-circle-fill{background-color:#FEE500;}
.viber .hotline-phone-ring-circle-fill{background-color:#7d3daf;}
.hotline-phone-ring-img-circle{background-color:red;width:40px;height:40px;top:10px;left:10px;position:absolute;background-size:20px;border-radius:100%;border:2px solid transparent;animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;transform-origin:50% 50%;display:flex;align-items:center;justify-content:center}
.zalo .hotline-phone-ring-img-circle{background-color:#0182ca;}
.whatapp .hotline-phone-ring-img-circle{background-color:#1bd741;color: #fff;font-size: 25px;}
.kakao .hotline-phone-ring-img-circle{background-color:#FEE500;}
.viber .hotline-phone-ring-img-circle{background-color:#7d3daf;}
@-webkit-keyframes phonering-alo-circle-anim {
0%{-webkit-transform:rotate(0) scale(.5) skew(1deg);-webkit-opacity:.1}
30%{-webkit-transform:rotate(0) scale(.7) skew(1deg);-webkit-opacity:.5}
100%{-webkit-transform:rotate(0) scale(1) skew(1deg);-webkit-opacity:.1}
}
@-webkit-keyframes phonering-alo-circle-fill-anim {
0%{-webkit-transform:rotate(0) scale(.7) skew(1deg);opacity:.6}
50%{-webkit-transform:rotate(0) scale(1) skew(1deg);opacity:.6}
100%{-webkit-transform:rotate(0) scale(.7) skew(1deg);opacity:.6}
}
@-webkit-keyframes phonering-alo-circle-img-anim {
0%{-webkit-transform:rotate(0) scale(1) skew(1deg)}
10%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}
20%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}
30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}
40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}
50%{-webkit-transform:rotate(0) scale(1) skew(1deg)}
100%{-webkit-transform:rotate(0) scale(1) skew(1deg)}
}