:root {
--main-color: #007cba;
--secondary-color: #ffffff;
--primary-color: #007cba;
--color01: #F7F8F8;
--color02: #9FA0A0;
--color03: #525152;
--Brown01: #5c3a31;
--Brown02: #835B36;
--Brown03: #BB8058;
--Brown04_BE: #b79779;
--Brown05_BEtxt: #876464;
--BTN_Red: #e3344b;
--BTN_Green: #337e47;
--BTN_Yellow: #f39800;
--BTN_Blue: #0061f3;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
}  .popupShowAni{
animation: popupShowAni 0.75s;
}
@keyframes popupShowAni {
0%,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1)
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9)
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03)
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97)
}
to {
opacity: 1;
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
.popupCloseAni{
animation: popupCloseAni 0.75s;
}
@keyframes popupCloseAni {
0% {
opacity: 1
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
to {
opacity: 0;
}
}