@charset "UTF-8";
/* VAR */
/* FONT_FACE */
/*@font-face {*/
/*  font-family: "gothamultra";*/
/*  src: url("/haitac/tet2021/assets/fonts/gothamultra.eot");*/
/*  src: url("/haitac/tet2021/assets/fonts/gothamultra.eot?#iefix") format("eot"), url("/haitac/tet2021/assets/fonts/gothamultra.ttf") format("truetype"), url("/haitac/tet2021/assets/fonts/gothamultra.svg") format("svg");*/
/*  font-weight: normal;*/
/*  font-style: normal;*/
/*}*/
/*.font-gothamultra {*/
/*  font-family: "gothamultra";*/
/*}*/

/*@font-face {*/
/*  font-family: "avoregular";*/
/*  src: url("/haitac/tet2021/assets/fonts/avoregular.eot");*/
/*  src: url("/haitac/tet2021/assets/fonts/avoregular.eot?#iefix") format("eot"), url("/haitac/tet2021/assets/fonts/avoregular.ttf") format("truetype"), url("/haitac/tet2021/assets/fonts/avoregular.svg") format("svg");*/
/*  font-weight: normal;*/
/*  font-style: normal;*/
/*}*/
/*.font-avoregular {*/
/*  font-family: "avoregular";*/
/*}*/

/*@font-face {*/
/*  font-family: "avobold";*/
/*  src: url("/haitac/tet2021/assets/fonts/avobold.eot");*/
/*  src: url("/haitac/tet2021/assets/fonts/avobold.eot?#iefix") format("eot"), url("/haitac/tet2021/assets/fonts/avobold.ttf") format("truetype"), url("/haitac/tet2021/assets/fonts/avobold.svg") format("svg");*/
/*  font-weight: normal;*/
/*  font-style: normal;*/
/*}*/
/*.font-avobold {*/
/*  font-family: "avobold";*/
/*}*/

/*@font-face {*/
/*  font-family: "androgyne";*/
/*  src: url("/haitac/tet2021/assets/fonts/androgyne.eot");*/
/*  src: url("/haitac/tet2021/assets/fonts/androgyne.eot?#iefix") format("eot"), url("/haitac/tet2021/assets/fonts/androgyne.ttf") format("truetype"), url("/haitac/tet2021/assets/fonts/androgyne.svg") format("svg");*/
/*  font-weight: normal;*/
/*  font-style: normal;*/
/*}*/
/*.font-androgyne {*/
/*  font-family: "androgyne";*/
/*}*/

/*@font-face {*/
/*  font-family: "tahoma";*/
/*  src: url("/haitac/tet2021/assets/fonts/tahoma.eot");*/
/*  src: url("/haitac/tet2021/assets/fonts/tahoma.eot?#iefix") format("eot"), url("/haitac/tet2021/assets/fonts/tahoma.ttf") format("truetype"), url("/haitac/tet2021/assets/fonts/tahoma.svg") format("svg");*/
/*  font-weight: normal;*/
/*  font-style: normal;*/
/*}*/
.font-tahoma {
  font-family: "tahoma";
}

/* =Reset default browser CSS.
-------------------------------------------------------------- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

:focus {
  outline: 0;
}

ol,
ul {
  list-style: none;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

caption,
th,
td {
  font-weight: normal;
  text-align: left;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}

blockquote,
q {
  quotes: "" "";
}

a img {
  border: 0;
}

figure {
  margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

/* -------------------------------------------------------------- */
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a:hover,
a:focus,
a:hover p,
select:hover,
select:focus,
select:active {
  text-decoration: none;
  outline: none !important;
}

a,
a:link {
  text-decoration: none;
  outline: none !important;
  color: #fff;
}

button {
  cursor: pointer;
}

.clearfix:after {
  content: "";
  visibility: hidden;
  display: table;
  clear: both;
}

::-webkit-input-placeholder {
  /* Firefox, Chrome, Opera */
  color: #595a5a;
}

::-moz-placeholder {
  /* Firefox, Chrome, Opera */
  color: #595a5a;
}

:-ms-input-placeholder {
  /* Firefox, Chrome, Opera */
  color: #595a5a;
}

::-ms-input-placeholder {
  /* Firefox, Chrome, Opera */
  color: #595a5a;
}

::placeholder {
  /* Firefox, Chrome, Opera */
  color: #595a5a;
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #595a5a;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #595a5a;
}

*,
.box_sizing_border_box {
  box-sizing: border-box;
}

.a100 {
  width: 100%;
  height: 100%;
  display: block;
}

.t-upper {
  text-transform: uppercase;
}

.t-center {
  text-align: center;
}

.t-left {
  text-align: left;
}

.t-right {
  text-align: right;
}

.img-responsive {
  max-width: 100%;
  width: auto;
  height: auto;
}

.float-l {
  float: left;
}

.float-r {
  float: right;
}

.reverse-x {
  transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
}

.reverse-y {
  transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  -moz-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  -o-transform: scaleY(-1);
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

.d-flex {
  display: flex;
}
.d-flex.a-center {
  align-items: center;
}
.d-flex.j-center {
  justify-content: center;
}
.d-flex.j-space-between {
  justify-content: space-between;
}
.d-flex.j-space-around {
  justify-content: space-around;
}
.d-flex.c-direc {
  flex-direction: column;
}
.d-flex.f-wrap {
  flex-wrap: wrap;
}
.d-flex.f-column {
  flex-flow: column;
}

.d-block {
  display: block;
}

.d-none {
  display: none;
}

.d-inline-block {
  display: inline-block;
}

.btn {
  cursor: pointer;
}

/* VAR */
/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* Slider */
/* Icons */
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  outline: none;
  background: transparent;
  color: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}
.slick-prev:before,
.slick-next:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  color: white;
  opacity: 0.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: -25px;
}
[dir=rtl] .slick-prev {
  left: auto;
  right: -25px;
}
[dir=rtl] .slick-prev:before {
  content: "→";
}

.slick-next {
  right: -25px;
}
[dir=rtl] .slick-next {
  left: -25px;
  right: auto;
}
[dir=rtl] .slick-next:before {
  content: "←";
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 20px;
  width: 20px;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  padding: 5px;
  cursor: pointer;
}
.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
  opacity: 1;
}
.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "•";
  width: 20px;
  height: 20px;
  font-family: "slick";
  font-size: 6px;
  line-height: 20px;
  text-align: center;
  color: black;
  opacity: 0.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  color: black;
  opacity: 0.75;
}

html {
  overflow-x: hidden !important;
  font-size: 10px;
}
@media only screen and (max-width: 1920px) {
  html {
    font-size: 0.5208333333vw;
  }
}
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
  html {
    font-size: 8.7px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  html {
    font-size: 6.5px;
  }
}
@media only screen and (max-width: 768px) {
  html {
    font-size: 1.3020833333vw;
  }
}
@media only screen and (max-width: 568px) {
  html {
    font-size: 7.3px;
  }
}
@media only screen and (max-width: 413px) {
  html {
    font-size: 7px;
  }
}
@media only screen and (max-width: 375px) {
  html {
    font-size: 6px;
  }
}

body {
  margin: 0 auto;
  font-family: "tahoma";
  font-size: 13px;
  line-height: 1.5;
  font-weight: 300;
  max-width: 1920px;
  margin: 0 auto;
  background: none;
  overflow-x: hidden !important;
}
body::-webkit-scrollbar {
  width: 8px;
}
body::-webkit-scrollbar-track {
  background: #1e3f20;
  border-radius: 12px;
}
body::-webkit-scrollbar-thumb {
  background: #4a7856;
  border-radius: 12px;
}

.container {
  position: relative;
  width: 120rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media only screen and (max-width: 768px) {
  .container {
    max-width: 689px;
    width: 100%;
  }
}

#wrapper {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.title-main-content {
  font-size: 4rem;
  width: 116.4rem;
  margin: 5.1rem auto 0;
  line-height: 5.3rem;
}
@media only screen and (max-width: 768px) {
  .title-main-content {
    width: 100%;
  }
}
@media only screen and (max-width: 413px) {
  .title-main-content {
    font-size: 3.3rem;
  }
}
.title-main-content .txt-title {
  position: relative;
  text-align: center;
}
.title-main-content .txt-title p {
  background: -webkit-linear-gradient(#fff 55%, #eaa400);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.title-main-content .txt-title:before, .title-main-content .txt-title:after {
  position: absolute;
  content: "";
  top: 58%;
  transform: translateY(-50%);
  background: url(../images/obj-title.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 20rem;
  height: 3.5rem;
}
.title-main-content .txt-title:before {
  left: 0.2rem;
}
@media only screen and (max-width: 768px) {
  .title-main-content .txt-title:before {
    left: -13.2rem;
  }
}
@media only screen and (max-width: 568px) {
  .title-main-content .txt-title:before {
    display: none;
  }
}
.title-main-content .txt-title:after {
  right: 0.2rem;
  transform: translateY(-50%) rotateZ(180deg);
}
@media only screen and (max-width: 768px) {
  .title-main-content .txt-title:after {
    right: -13.2rem;
  }
}
@media only screen and (max-width: 568px) {
  .title-main-content .txt-title:after {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .hidden-mobile {
    display: none !important;
  }
}

@media only screen and (min-width: 769px) {
  .hidden-pc {
    display: none !important;
  }
}

.jello-horizontal {
  -webkit-animation: jello-horizontal 0.9s both;
  animation: jello-horizontal 0.9s both;
}

.slick-next,
.slick-prev {
  background: url(../images/bg-arrow.png) !important;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain !important;
  width: 5.1rem;
  height: 6.6rem;
  left: 0;
}

.slick-next {
  transform: translate(0, -50%) scaleX(-1);
  left: unset;
  right: 0;
}

.cd {
  position: absolute;
}

.cd1 {
  width: 5.83333333vw;
  height: 4.375vw;
  top: 0;
  left: 118%;
}

.cd2 {
  width: 4.16666667vw;
  height: 6.25vw;
  top: 8%;
  left: 75%;
}

.cd3 {
  width: 10.57291667vw;
  height: 10.625vw;
  top: -6%;
  left: 17%;
}

.cd4 {
  width: 4.79166667vw;
  height: 2.8125vw;
  top: -7%;
  left: 0;
}

.cd5 {
  width: 4.375vw;
  height: 5.78125vw;
  top: 4%;
  left: 96%;
}

.cd6 {
  width: 3.95833333vw;
  height: 3.07291667vw;
  top: 36%;
  left: 116%;
}

.cd7 {
  width: 6.25vw;
  height: 7.70833333vw;
  top: 40%;
  left: 120%;
}

.caidai1 {
  animation: cd 5.5s infinite ease-in;
  -webkit-animation: cd 5.5s infinite ease-in;
}

.caidai2 {
  animation: cd 7.5s infinite linear;
  -webkit-animation: cd 7.5s infinite linear;
}

.caidai3 {
  animation: cd 7.4s infinite ease-in;
  -webkit-animation: cd 7.4s infinite ease-in;
}

.caidai4 {
  animation: cd 5.4s infinite linear;
  -webkit-animation: cd 5.4s infinite linear;
}

.caidai5 {
  animation: cd 8.4s infinite ease-in;
  -webkit-animation: cd 8.4s infinite ease-in;
}

.caidai6 {
  animation: cd 5.5s infinite linear;
  -webkit-animation: cd 5.5s infinite linear;
}

.caidai7 {
  animation: cd 6.5s infinite linear;
  -webkit-animation: cd 6.5s infinite linear;
}

@-webkit-keyframes cd {
  0% {
    transform: translate3d(0, 0, 0) rotate(15deg);
    -webkit-transform: translate3d(0, 0, 0) rotate(15deg);
  }
  100% {
    transform: translate3d(-50vw, 62.5vw, 0) rotate(-15deg);
    -webkit-transform: translate3d(-50vw, 62.5vw, 0) rotate(-15deg);
  }
}

@keyframes cd {
  0% {
    transform: translate3d(0, 0, 0) rotate(15deg);
    -webkit-transform: translate3d(0, 0, 0) rotate(15deg);
  }
  100% {
    transform: translate3d(-50vw, 62.5vw, 0) rotate(-15deg);
    -webkit-transform: translate3d(-50vw, 62.5vw, 0) rotate(-15deg);
  }
}
@-webkit-keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
/*! Lity - v2.4.1 - 2020-04-26
* http://sorgalla.com/lity/
* Copyright (c) 2015-2020 Jan Sorgalla; Licensed MIT */
.lity {
  z-index: 9990;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  white-space: nowrap;
  background: #0b0b0b;
  background: rgba(0, 0, 0, 0.9);
  outline: none !important;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lity.lity-opened {
  opacity: 1;
}

.lity.lity-closed {
  opacity: 0;
}

.lity * {
  box-sizing: border-box;
}

.lity-wrap {
  z-index: 9990;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  outline: none !important;
}

.lity-wrap:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

.lity-loader {
  z-index: 9991;
  color: #fff;
  position: absolute;
  top: 50%;
  margin-top: -0.8em;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lity-loading .lity-loader {
  opacity: 1;
}

.lity-container {
  z-index: 9992;
  position: relative;
  text-align: left;
  vertical-align: middle;
  display: inline-block;
  white-space: normal;
  max-width: 100%;
  max-height: 100%;
  outline: none !important;
}

.lity-content {
  z-index: 9993;
  width: 100%;
  transform: scale(1);
  transition: transform 0.3s ease;
}

.lity-loading .lity-content,
.lity-closed .lity-content {
  transform: scale(0.8);
}

.lity-content:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.lity-close {
  z-index: 9994;
  width: 35px;
  height: 35px;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-appearance: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  padding: 0;
  color: #fff;
  font-style: normal;
  font-size: 35px;
  font-family: Arial, Baskerville, monospace;
  line-height: 35px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  border: 0;
  background: none;
  outline: none;
  box-shadow: none;
}

.lity-close::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.lity-close:hover,
.lity-close:focus,
.lity-close:active,
.lity-close:visited {
  text-decoration: none;
  text-align: center;
  padding: 0;
  color: #fff;
  font-style: normal;
  font-size: 35px;
  font-family: Arial, Baskerville, monospace;
  line-height: 35px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  border: 0;
  background: none;
  outline: none;
  box-shadow: none;
}

.lity-close:active {
  top: 1px;
}

/* Image */
.lity-image img {
  max-width: 100%;
  display: block;
  line-height: 0;
  border: 0;
}

/* iFrame */
.lity-iframe .lity-container,
.lity-youtube .lity-container,
.lity-vimeo .lity-container,
.lity-facebookvideo .lity-container,
.lity-googlemaps .lity-container {
  width: 100%;
  max-width: 964px;
}

.lity-iframe-container {
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  overflow: auto;
  pointer-events: auto;
  transform: translateZ(0);
  -webkit-overflow-scrolling: touch;
}

.lity-iframe-container iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

.lity-hide {
  display: none;
}

/*!
 * fullPage 3.0.9
 * https://github.com/alvarotrigo/fullPage.js
 *
 * @license GPLv3 for open source use only
 * or Fullpage Commercial License for commercial use
 * http://alvarotrigo.com/fullPage/pricing/
 *
 * Copyright (C) 2018 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo
 */
html.fp-enabled,
.fp-enabled body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  /*Avoid flicker on slides transitions for mobile phones #336 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.fp-section {
  position: relative;
  /* Safari<=5 Android<=3 */
  /* <=28 */
  box-sizing: border-box;
}

.fp-slide {
  float: left;
}

.fp-slide, .fp-slidesContainer {
  height: 100%;
  display: block;
}

.fp-slides {
  z-index: 1;
  height: 100%;
  overflow: hidden;
  position: relative;
  /* Safari<=6 Android<=4.3 */
  transition: all 0.3s ease-out;
}

.fp-section.fp-table, .fp-slide.fp-table {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.fp-tableCell {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}

.fp-slidesContainer {
  float: left;
  position: relative;
}

.fp-controlArrow {
  -webkit-user-select: none;
  /* webkit (safari, chrome) browsers */
  -moz-user-select: none;
  /* mozilla browsers */
  -khtml-user-select: none;
  /* webkit (konqueror) browsers */
  -ms-user-select: none;
  /* IE10+ */
  position: absolute;
  z-index: 4;
  top: 50%;
  cursor: pointer;
  width: 0;
  height: 0;
  border-style: solid;
  margin-top: -38px;
  transform: translate3d(0, 0, 0);
}

.fp-controlArrow.fp-prev {
  left: 15px;
  width: 0;
  border-width: 38.5px 34px 38.5px 0;
  border-color: transparent #fff transparent transparent;
}

.fp-controlArrow.fp-next {
  right: 15px;
  border-width: 38.5px 0 38.5px 34px;
  border-color: transparent transparent transparent #fff;
}

.fp-scrollable {
  overflow: hidden;
  position: relative;
}

.fp-scroller {
  overflow: hidden;
}

.iScrollIndicator {
  border: 0 !important;
}

.fp-notransition {
  transition: none !important;
}

#fp-nav {
  position: fixed;
  z-index: 100;
  top: 50%;
  opacity: 1;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translate3d(0, -50%, 0);
}

#fp-nav.fp-right {
  right: 17px;
}

#fp-nav.fp-left {
  left: 17px;
}

.fp-slidesNav {
  position: absolute;
  z-index: 4;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  left: 0 !important;
  right: 0;
  margin: 0 auto !important;
}

.fp-slidesNav.fp-bottom {
  bottom: 17px;
}

.fp-slidesNav.fp-top {
  top: 17px;
}

#fp-nav ul,
.fp-slidesNav ul {
  margin: 0;
  padding: 0;
}

#fp-nav ul li,
.fp-slidesNav ul li {
  display: block;
  width: 14px;
  height: 13px;
  margin: 7px;
  position: relative;
}

.fp-slidesNav ul li {
  display: inline-block;
}

#fp-nav ul li a,
.fp-slidesNav ul li a {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
}

#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
  height: 12px;
  width: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 100%;
}

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  height: 4px;
  width: 4px;
  border: 0;
  background: #333;
  left: 50%;
  top: 50%;
  margin: -2px 0 0 -2px;
  transition: all 0.1s ease-in-out;
}

#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span {
  width: 10px;
  height: 10px;
  margin: -5px 0px 0px -5px;
}

#fp-nav ul li .fp-tooltip {
  position: absolute;
  top: -2px;
  color: #fff;
  font-size: 14px;
  font-family: arial, helvetica, sans-serif;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  display: block;
  opacity: 0;
  width: 0;
  cursor: pointer;
}

#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active + .fp-tooltip {
  transition: opacity 0.2s ease-in;
  width: auto;
  opacity: 1;
}

#fp-nav ul li .fp-tooltip.fp-right {
  right: 20px;
}

#fp-nav ul li .fp-tooltip.fp-left {
  left: 20px;
}

.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell {
  height: auto !important;
}

.fp-responsive .fp-auto-height-responsive.fp-section,
.fp-responsive .fp-auto-height-responsive .fp-slide,
.fp-responsive .fp-auto-height-responsive .fp-tableCell {
  height: auto !important;
}

/*Only display content to screen readers*/
.fp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* PLOP_COMPONENTS_IMPORT */
.nav-right {
  position: absolute;
  top: 27.5rem;
  background: url(../images/nav-right.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  width: 18.6rem;
  height: 33.6rem;
  right: 0;
  transition: top 1s ease;
  margin: 0 auto;
  text-align: center;
  z-index: 9;
}
.nav-right .qr-code {
  margin-top: -5.8rem;
  display: block;
}
.nav-right .qr-code img {
  width: 15.1rem;
  height: 15.1rem;
}
@media only screen and (max-width: 1024px) {
  .nav-right {
    display: none;
  }
}

.link-appstore,
.link-ggplay,
.link-pc {
  display: block;
  margin: 0.6rem auto;
  position: relative;
  background: url(../images/navright-bg-btn.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  width: 15.8rem;
  height: 4.9rem;
  transition: 1s all;
}
.link-appstore:hover,
.link-ggplay:hover,
.link-pc:hover {
  -webkit-filter: brightness(1.2);
  filter: brightness(1.2);
}
.link-appstore .centered,
.link-ggplay .centered,
.link-pc .centered {
  width: 100%;
  display: grid;
  justify-content: center;
  grid-template-columns: 23px 82px;
  align-items: center;
  padding: 0 1rem;
  grid-gap: 1rem;
}
.link-appstore .text,
.link-ggplay .text,
.link-pc .text {
  text-align: left;
}

.go-top {
  width: 5rem;
  height: 5rem;
  cursor: pointer;
  display: block;
  margin: 3.2rem 6.9rem 0;
}

.modal-form {
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
}

.bg-mark {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.popup-title {
  margin-bottom: 2rem;
}
.popup-title span {
  color: #ffe8b1;
  font-size: 3rem;
  line-height: 1;
  font-family: "avoregular";
}

.popup-text {
  font-family: "avoregular";
  font-size: 1.8rem;
}
@media only screen and (max-width: 568px) {
  .popup-text {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media only screen and (max-width: 480px) {
  .popup-text {
    height: 51rem;
    overflow-y: scroll;
    padding: 0;
  }
}
@media only screen and (max-width: 375px) {
  .popup-text {
    font-size: 11px;
  }
}
.popup-text input {
  font-family: "avoregular";
}
.popup-text #btn-xacnhan,
.popup-text #btn-close {
  background: url(../images/bg-btn-popup.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 305px;
  height: 71px;
  display: block;
  position: relative;
  grid-column: 1/span 3;
  font-size: 24px;
  color: #ffe8b1;
}
.popup-text .mess-show {
  margin: 13rem 0 14rem;
}

.popup-type1.modal-main {
  width: 70.8rem;
  height: 50.8rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (max-width: 568px) {
  .popup-type1.modal-main {
    width: 64.8rem;
    height: 46.8rem;
  }
}
@media only screen and (max-width: 480px) {
  .popup-type1.modal-main {
    width: 59.8rem;
  }
}
@media only screen and (max-width: 360px) {
  .popup-type1.modal-main {
    width: 100%;
  }
}
.popup-type1.modal-main:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%);
  background: url(../images/bg-popup-type1.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 73.8rem;
  height: 65.8rem;
  z-index: -1;
  pointer-events: none;
}
@media only screen and (max-width: 568px) {
  .popup-type1.modal-main:before {
    width: 71.8rem;
    height: 59.8rem;
  }
}
@media only screen and (max-width: 413px) {
  .popup-type1.modal-main:before {
    width: 67.8rem;
    height: 55.8rem;
  }
}
.popup-type1.modal-main:after {
  content: "";
  position: absolute;
  bottom: -10rem;
  left: -23.2rem;
  background: url(../images/obj-chopper.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 35rem;
  height: 40rem;
}
@media only screen and (max-width: 568px) {
  .popup-type1.modal-main:after {
    width: 33rem;
    height: 38rem;
    display: none;
  }
}
.popup-type1.modal-main .popup-container {
  padding: 0 1.2rem;
  width: 100%;
  height: 100%;
  position: relative;
  font-family: "avoregular";
  font-size: 1.6rem;
}
.popup-type1.modal-main .btn-close {
  width: 20.7rem;
  height: 6.5rem;
  position: relative;
  margin: 2rem auto 0;
}
@media only screen and (max-width: 568px) {
  .popup-type1.modal-main .btn-close {
    margin: 0.5rem auto 0;
  }
}
.popup-type1.modal-main .btn-close:hover {
  -webkit-filter: brightness(1.1);
  filter: brightness(1.1);
}
.popup-type1.modal-main .btn-close:before {
  content: "";
  position: absolute;
  top: 41%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../images/bg-btn2.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 200%;
  width: 25.6rem;
  height: 9rem;
}
@media only screen and (max-width: 568px) {
  .popup-type1.modal-main .btn-close:before {
    width: 23.6rem;
    height: 8rem;
  }
}
.popup-type1.modal-main .btn-close p {
  text-align: center;
  color: white;
  font-size: 1.76rem;
}
.popup-type1.modal-main .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup-type1.modal-main .pagination .number {
  margin: 1rem 0;
  padding: 0 0.5rem;
  font-family: "avoregular";
  font-size: 1.7rem;
  color: #66573e;
}
.popup-type1.modal-main .pagination .number-active {
  font-weight: 600;
}
.popup-type1.modal-main .pagination .arrow-left,
.popup-type1.modal-main .pagination .arrow-right {
  background: url(../images/arrow-pagination.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 2.1rem;
  height: 2.1rem;
}
.popup-type1.modal-main .pagination .arrow-right {
  transform: rotate(180deg);
}
.popup-type1.modal-main h6 {
  color: #66573e;
  background-color: #e6dbc3;
  width: 100%;
  height: 4.8rem;
  line-height: 4.8rem;
  text-align: center;
  font-family: "avoregular";
  font-size: 1.7rem;
}

#popup-noti {
  z-index: 999;
}
#popup-noti .popup-text {
  padding-top: 5rem;
  font-family: "avoregular";
}

#popup-addturn .popup-text {
  width: 100%;
  height: 50rem;
}
#popup-addturn .popup-text .item {
  display: flex;
  justify-content: center;
  background-color: #e6dbc3;
  margin-bottom: 2.8rem;
  padding-left: 5.4rem;
}
@media only screen and (max-width: 568px) {
  #popup-addturn .popup-text .item {
    padding-left: 2.4rem;
    margin-bottom: 2.3rem;
  }
}
#popup-addturn .popup-text .col1 {
  width: calc(100% - 17.5rem);
  font-family: "avoregular";
  color: #66573e;
  text-align: left;
  display: flex;
  align-items: center;
}
#popup-addturn .popup-text .item__btn {
  background: url(../images/bg-btn3.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 200%;
  width: 17.5rem;
  height: 4.8rem;
  position: relative;
  transition: 1s all;
}
#popup-addturn .popup-text .item__btn:hover {
  -webkit-filter: brightness(1.1);
  filter: brightness(1.1);
}
#popup-addturn .popup-text .item__btn-active {
  background: url(../images/bg-btn.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 200%;
}
#popup-addturn .popup-text .item__btn-received {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  cursor: no-drop;
}
#popup-addturn .popup-text .item__btn-received:hover {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}
#popup-addturn .popup-text .item__btn p {
  font-family: "avobold";
  line-height: 1;
  color: white;
  font-size: 1.5rem;
  text-align: center;
  width: 100%;
}

#popup-history-purchase .popup-text .table-history,
#popup-receiving-gifts .popup-text .table-history {
  width: 100%;
}
#popup-history-purchase .popup-text .table-history tr:first-child,
#popup-receiving-gifts .popup-text .table-history tr:first-child {
  background-color: #e6dbc3;
  height: 3.9rem;
}
#popup-history-purchase .popup-text .table-history tr:first-child th,
#popup-receiving-gifts .popup-text .table-history tr:first-child th {
  line-height: 3.9rem;
  border: 1px solid transparent;
}
#popup-history-purchase .popup-text .table-history th,
#popup-history-purchase .popup-text .table-history td,
#popup-receiving-gifts .popup-text .table-history th,
#popup-receiving-gifts .popup-text .table-history td {
  text-align: center;
  font-size: 1.7rem;
  font-family: "avoregular";
  height: 3.6rem;
  line-height: 3.6rem;
  border: 1px solid #d6c1a2;
}

#popup-match-deal .popup-text .ct,
#popup-exchange-gifts .popup-text .ct,
#popup-claim .popup-text .ct,
#popup-qua-moc .popup-text .ct {
  width: 34.3rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 2.8rem auto 0;
  grid-gap: 2.3rem;
  display: flex;
  flex-flow: wrap;
  height: 21.7rem;
  align-items: center;
  justify-content: center;
}
#popup-match-deal .popup-text .ct{
  width: 46.3rem;
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;

}
#popup-match-deal .popup-text .item,
#popup-exchange-gifts .popup-text .item,
#popup-claim .popup-text .item,
#popup-qua-moc .popup-text .item {
  background: url(../images/popup-bg-item.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 9.7rem;
  height: 9.7rem;
  position: relative;
}
@media only screen and (max-width: 480px) {
  #popup-match-deal .popup-text .item,
  #popup-exchange-gifts .popup-text .item,
  #popup-claim .popup-text .item,
  #popup-qua-moc .popup-text .item {
    width: 8.7rem;
    height: 8.7rem;
  }
}
@media only screen and (max-width: 360px) {
  #popup-match-deal .popup-text .item,
  #popup-exchange-gifts .popup-text .item,
  #popup-claim .popup-text .item,
  #popup-qua-moc .popup-text .item {
    width: 8.3rem;
    height: 8.3rem;
  }
}
#popup-match-deal .popup-text .item p,
#popup-exchange-gifts .popup-text .item p,
#popup-claim .popup-text .item p,
#popup-qua-moc .popup-text .item p {
  width: 100%;
  text-align: center;
  font-family: "androgyne";
  font-size: 2.7rem;
  background: -webkit-linear-gradient(#fff 55%, #eaa400);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#popup-match-deal .popup-text .item .number-gift,
#popup-exchange-gifts .popup-text .item .number-gift,
#popup-claim .popup-text .item .number-gift,
#popup-qua-moc .popup-text .item .number-gift {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  font-family: "avoregular";
  font-size: 1.2rem;
  color: white;
  background: black;
  border-radius: 5px;
  padding: 0 5px;
}
#popup-match-deal .popup-text .item img,
#popup-exchange-gifts .popup-text .item img,
#popup-claim .popup-text .item img,
#popup-qua-moc .popup-text .item img {
  width: 80%;
  height: auto;
}
#popup-match-deal .popup-text .grp-price,
#popup-exchange-gifts .popup-text .grp-price,
#popup-claim .popup-text .grp-price,
#popup-qua-moc .popup-text .grp-price {
  width: 34.3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 3.5rem auto;
  grid-gap: 1.5rem;
}
#popup-match-deal .popup-text .grp-price p,
#popup-exchange-gifts .popup-text .grp-price p,
#popup-claim .popup-text .grp-price p,
#popup-qua-moc .popup-text .grp-price p {
  text-align: left;
  font-family: "avoregular";
  font-size: 1.7rem;
}
#popup-match-deal .popup-text .grp-price b,
#popup-exchange-gifts .popup-text .grp-price b,
#popup-claim .popup-text .grp-price b,
#popup-qua-moc .popup-text .grp-price b {
  color: #ff5320;
}
#popup-match-deal .popup-text .grp-price select,
#popup-exchange-gifts .popup-text .grp-price select,
#popup-claim .popup-text .grp-price select,
#popup-qua-moc .popup-text .grp-price select {
  background-color: #454034;
  font-family: "avoregular";
  color: white;
  font-size: 1.7rem;
}
#popup-match-deal .popup-text .grp-price option,
#popup-exchange-gifts .popup-text .grp-price option,
#popup-claim .popup-text .grp-price option,
#popup-qua-moc .popup-text .grp-price option {
  background-color: #454034;
  font-family: "avoregular";
  color: white;
  font-size: 1.7rem;
}
#popup-match-deal .quicktext,
#popup-exchange-gifts .quicktext,
#popup-claim .quicktext,
#popup-qua-moc .quicktext {
  padding: 3.3rem 0 4.8rem;
}
#popup-match-deal button,
#popup-exchange-gifts button,
#popup-claim button,
#popup-qua-moc button {
  width: 20.7rem;
  height: 6.5rem;
  position: relative;
  margin: 2rem auto 0;
  background-color: transparent;
  border: none;
  color: white;
  font-size: 1.76rem;
  font-family: "avobold";
}
#popup-match-deal button:hover,
#popup-exchange-gifts button:hover,
#popup-claim button:hover,
#popup-qua-moc button:hover {
  -webkit-filter: brightness(1.1);
  filter: brightness(1.1);
}
#popup-match-deal button:before,
#popup-exchange-gifts button:before,
#popup-claim button:before,
#popup-qua-moc button:before {
  content: "";
  position: absolute;
  top: 41%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../images/bg-btn2.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 203%;
  width: 22.6rem;
  height: 8rem;
  z-index: -1;
}

#popup-claim .popup-text .ct,
#popup-qua-moc .popup-text .ct {
  width: 100%;
  height: 22rem;
  align-items: center;
  display: flex;
  justify-content: center;
  flex-flow: wrap;
  padding: 0 4.4rem;
}
@media only screen and (max-width: 480px) {
  #popup-claim .popup-text .ct,
  #popup-qua-moc .popup-text .ct {
    padding: 0;
  }
}
#popup-claim .popup-text .item,
#popup-qua-moc .popup-text .item {
  -webkit-animation: flip-in-ver-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: flip-in-ver-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
#popup-claim .popup-text .item:nth-child(1),
#popup-qua-moc .popup-text .item:nth-child(1) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
#popup-claim .popup-text .item:nth-child(2),
#popup-qua-moc .popup-text .item:nth-child(2) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
#popup-claim .popup-text .item:nth-child(3),
#popup-qua-moc .popup-text .item:nth-child(3) {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}
#popup-claim .popup-text .item:nth-child(4),
#popup-qua-moc .popup-text .item:nth-child(4) {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
#popup-claim .popup-text .item:nth-child(5),
#popup-qua-moc .popup-text .item:nth-child(5) {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}
#popup-claim .popup-text .item:nth-child(6),
#popup-qua-moc .popup-text .item:nth-child(6) {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
#popup-claim .popup-text .item:nth-child(7),
#popup-qua-moc .popup-text .item:nth-child(7) {
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
}
#popup-claim .popup-text .item:nth-child(8),
#popup-qua-moc .popup-text .item:nth-child(8) {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
#popup-claim .popup-text .item:nth-child(9),
#popup-qua-moc .popup-text .item:nth-child(9) {
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
}
#popup-claim .popup-text .item:nth-child(10),
#popup-qua-moc .popup-text .item:nth-child(10) {
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
}
#popup-claim .popup-text .item .number-gift,
#popup-qua-moc .popup-text .item .number-gift {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  font-family: "avoregular";
  font-size: 1.5rem;
  color: white;
  background: black;
  border-radius: 5px;
  padding: 0 5px;
}
#popup-claim .grptext,
#popup-qua-moc .grptext {
  padding: 3.3rem 0 4.8rem;
}
#popup-claim .grptext .quicktext,
#popup-qua-moc .grptext .quicktext {
  padding: 0;
  color: #66573e;
}

#popup-choose-char .popup-text .title,
#popup-login .popup-text .title {
  font-family: "avobold";
}
#popup-choose-char .ct,
#popup-login .ct {
  font-family: "avoregular";
  width: 50rem;
  margin: 5rem auto 0;
}
@media only screen and (max-width: 568px) {
  #popup-choose-char .ct,
  #popup-login .ct {
    margin: 2rem auto 0;
  }
}
#popup-choose-char .ct .info-user,
#popup-login .ct .info-user {
  text-align: left;
}
#popup-choose-char .ct .info-user span,
#popup-login .ct .info-user span {
  color: #66573e;
}
#popup-choose-char .ct .info-user a,
#popup-login .ct .info-user a {
  color: #66573e;
}
#popup-choose-char .ct form,
#popup-login .ct form {
  margin-top: 3rem;
}
#popup-choose-char .ct .form-ctr,
#popup-login .ct .form-ctr {
  margin: 2.5rem auto 3rem;
}
#popup-choose-char .ct .form-ctr .choose-text,
#popup-login .ct .form-ctr .choose-text {
  padding-left: 1rem;
  border-left: 2px solid #f6d10a;
  text-align: left;
}
#popup-choose-char .ct select,
#popup-login .ct select {
  width: 100%;
  padding-left: 0.5rem;
  border: 1px solid #fff;
  color: black;
  height: 5.5rem;
  line-height: 5.5rem;
  font-size: 1.6rem;
  margin-top: 1rem;
  font-family: "avoregular";
}
#popup-choose-char .ct button,
#popup-login .ct button {
  width: 20.7rem;
  height: 6.5rem;
  position: relative;
  margin: 2rem auto 0;
  background-color: transparent;
  border: none;
  color: white;
  font-size: 1.76rem;
  font-family: "avobold";
}
#popup-choose-char .ct button:hover,
#popup-login .ct button:hover {
  -webkit-filter: brightness(1.1);
  filter: brightness(1.1);
}
#popup-choose-char .ct button:before,
#popup-login .ct button:before {
  content: "";
  position: absolute;
  top: 41%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../images/bg-btn2.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 203%;
  width: 22.6rem;
  height: 8rem;
  z-index: -1;
}

#popup-login .wrapper-popup {
  border: none;
  min-height: 45rem;
}
#popup-login .detail-login {
  width: 90%;
  font-size: 1.8rem;
  line-height: 1.23;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  width: 80%;
  font-size: 2.2rem;
}
#popup-login .detail-login a {
  color: #fa7b68;
  cursor: pointer;
}
#popup-login .detail-login .max-form-auto {
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
}
#popup-login .detail-login .box-btn {
  margin-top: 3rem;
}
#popup-login .detail-login .btn-page {
  width: 20rem;
  line-height: 7rem;
  height: auto;
  line-height: 6rem;
  font-size: 2.5rem;
}
#popup-login .form-ctr {
  width: 100%;
  max-width: 50rem;
  height: 3.5rem;
  line-height: 3.5rem;
  margin: 2.5rem auto;
  position: relative;
}
#popup-login .form-ctr i {
  width: 19px;
  height: 24px;
  background: url(../images/icon-form-login.png) no-repeat;
  background-position: left top;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0.2rem;
}
#popup-login .form-ctr i.icon-password {
  background-position: -19px top;
}
@media only screen and (max-width: 413px) {
  #popup-login .form-ctr i {
    display: none;
  }
}
#popup-login .form-ctr .showhide-pass {
  display: none;
  cursor: pointer;
  width: 2.1rem;
  height: 1.8rem;
  background-position: -3.7rem 0;
  right: 0;
  left: inherit;
}
#popup-login .form-ctr .showhide-pass.show-pass {
  background-position: -5.8rem 0;
}
#popup-login input.text {
  border: none;
  background: transparent;
  width: 100%;
  height: 100%;
  font-size: 1.7rem;
  border-bottom: 1px solid #66573e;
  padding-left: 4rem;
  color: #66573e;
}
@media only screen and (max-width: 413px) {
  #popup-login input.text {
    padding-left: 1rem;
  }
}
#popup-login input[type=checkbox] {
  margin: 0;
  position: relative;
  top: 3px;
}
#popup-login .info-user {
  margin-top: 2.5rem;
  font-size: 1.9rem;
}
#popup-login .info-user span {
  float: left;
}
#popup-login .info-user .name-user {
  max-width: 25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
#popup-login .choose-text {
  line-height: 1.2;
  border-left: 3px solid #fff200;
  padding-left: 1rem;
}
#popup-login .forgot-login {
  align-items: center;
  justify-content: space-between;
  font-size: 1.7rem;
}
#popup-login .forgot-login .btn-login {
  background: url(../images/bg-btn-pop-hv.png) no-repeat center center;
  background-size: 100% 100%;
  padding: 1rem 2rem;
  color: #fff;
}
#popup-login .other-login {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4rem;
}
#popup-login .other-login .login-open-id {
  align-items: center;
  justify-content: center;
  margin-left: 2.5rem;
}
#popup-login .other-login .login-open-id a {
  border-radius: 50%;
  margin: 0 0.6rem;
}
#popup-login .other-login .login-open-id a img {
  width: 4.5rem;
  display: block;
}
#popup-login .popup-text .ct button {
  margin: 7rem auto 0;
}

.flip-in-ver-left {
  -webkit-animation: flip-in-ver-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: flip-in-ver-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@-webkit-keyframes flip-in-ver-left {
  0% {
    transform: rotateY(80deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(0);
    opacity: 1;
  }
}
@keyframes flip-in-ver-left {
  0% {
    transform: rotateY(80deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(0);
    opacity: 1;
  }
}
.bg-group {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  background-color: #370304;
  z-index: -1;
  width: 100%;
}
.bg-group .bg1 {
  background: url(../images/frame1.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 192rem 106.5rem;
  width: 100%;
  height: 106.5rem;
}
@media only screen and (max-width: 768px) {
  .bg-group .bg1 {
    background: url(../images/frame1_mobi.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 76.8rem 108.1rem;
    width: 100%;
    height: 108.1rem;
  }
}
.bg-group .bg2 {
  background: url(../images/frame2.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 192rem 103.9rem;
  width: 100%;
  height: 103.9rem;
}
@media only screen and (max-width: 768px) {
  .bg-group .bg2 {
    background: url(../images/frame2_mobi.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 76.8rem 108.4rem;
    width: 100%;
    height: 108.4rem;
  }
}
.bg-group .bg3 {
  background: url(../images/frame3.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 192rem 178.2rem;
  width: 100%;
  height: 178.2rem;
}
@media only screen and (max-width: 768px) {
  .bg-group .bg3 {
    background: url(../images/frame3_mobi.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 76.8rem 125.9rem;
    width: 100%;
    height: 125.9rem;
  }
}
.bg-group .bg4 {
  background: url(../images/frame4.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 192rem 56.9rem;
  width: 100%;
  height: 56.9rem;
}
@media only screen and (max-width: 768px) {
  .bg-group .bg4 {
    background: url(../images/frame4_mobi.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 76.8rem 148.7rem;
    width: 100%;
    height: 148.7rem;
  }
}
.bg-group .bg5 {
  background: url(../images/frame5.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 192rem 144.5rem;
  width: 100%;
  height: 144.5rem;
}
@media only screen and (max-width: 768px) {
  .bg-group .bg5 {
    background: url(../images/frame5_mobi.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 76.8rem 66.3rem;
    width: 100%;
    height: 66.3rem;
  }
}
.bg-group .bg6 {
  background: url(../images/frame6.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 192rem 110.1rem;
  width: 100%;
  height: 110.1rem;
}
@media only screen and (max-width: 768px) {
  .bg-group .bg6 {
    background: url(../images/frame6_mobi.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 76.8rem 120.8rem;
    width: 100%;
    height: 120.8rem;
  }
}
.bg-group .bg7 {
  background: url(../images/frame7.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 192rem 116.5rem;
  width: 100%;
  height: 116.5rem;
}
@media only screen and (max-width: 768px) {
  .bg-group .bg7 {
    background: url(../images/frame7_mobi.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 76.8rem 129.5rem;
    width: 100%;
    height: 129.5rem;
  }
}

.header {
  width: 100%;
  position: relative;
  border-bottom: 1px solid #ffffff7d;
  background-color: #23232d85;
}
@media only screen and (max-width: 768px) {
  .header {
    height: 9.3rem;
    background-color: #2b080a;
    border: none;
  }
}
.header .container {
  height: 7.7rem;
}
@media only screen and (max-width: 768px) {
  .header .container {
    max-width: 100%;
    height: 9.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.header .logo {
  position: absolute;
  left: 50%;
  top: 1.1rem;
  transform: translateX(-50%);
}
@media only screen and (max-width: 768px) {
  .header .logo {
    position: relative;
    left: unset;
    top: 4.8rem;
    transform: unset;
    float: left;
    margin-right: 0.8rem;
  }
}
@media only screen and (max-width: 480px) {
  .header .logo {
    top: 1.8rem;
  }
}
.header .logo img {
  width: 21rem;
  height: 15.5rem;
}
@media only screen and (max-width: 768px) {
  .header .logo img {
    width: 15.1rem;
    height: 15.1rem;
  }
}
@media only screen and (max-width: 480px) {
  .header .logo img {
    width: 9.1rem;
    height: 9.1rem;
  }
}
.header .txt-name-game .name-game,
.header .txt-name-game .txt-des {
  font-size: 1.5rem;
  text-transform: uppercase;
  font-family: "avobold";
  color: #ebd4ac;
}
@media only screen and (max-width: 480px) {
  .header .txt-name-game .name-game,
  .header .txt-name-game .txt-des {
    font-size: 11px;
    max-width: 21.7rem;
  }
}
.header .txt-name-game .txt-des {
  font-family: "avoregular";
}
@media only screen and (max-width: 413px) {
  .header .txt-name-game .txt-des {
    font-size: 9px;
  }
}
.header .link-download {
  position: relative;
  background: url(../images/bg-btn.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 200%;
  width: 17.5rem;
  height: 4.8rem;
  transition: 0.5s all;
}
.header .link-download:hover {
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 200%;
}
.header .link-download a {
  width: 100%;
  text-align: center;
}
.header .icon-hamburger {
  float: right;
}
.header .icon-hamburger #hambuger {
  display: inline-block;
  position: relative;
  height: 35px;
  width: 40px;
  cursor: pointer;
}
@media only screen and (max-width: 568px) {
  .header .icon-hamburger #hambuger {
    width: 33px;
  }
}
.header .icon-hamburger #hambuger .inner-hambuger {
  height: 5px;
  width: 100%;
  top: 16px;
  background-color: #faf2c1;
  position: absolute;
  transition: transform 0.2s ease 0s;
}
.header .icon-hamburger #hambuger .inner-hambuger:before, .header .icon-hamburger #hambuger .inner-hambuger:after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  height: 5px;
  width: 100%;
  background-color: #faf2c1;
}
.header .icon-hamburger #hambuger .inner-hambuger:before {
  top: -12px;
}
@media only screen and (min-width: 640px) {
  .header .icon-hamburger #hambuger .inner-hambuger:before {
    top: -15px;
  }
}
.header .icon-hamburger #hambuger .inner-hambuger:after {
  top: 12px;
}
@media only screen and (min-width: 640px) {
  .header .icon-hamburger #hambuger .inner-hambuger:after {
    top: 15px;
  }
}
.header #toggle-hambuger:checked ~ .icon-hamburger #hambuger .inner-hambuger {
  transform: rotate(45deg);
}
.header #toggle-hambuger:checked ~ .icon-hamburger #hambuger .inner-hambuger:before {
  top: 0px;
  transform: rotate(90deg);
}
.header #toggle-hambuger:checked ~ .icon-hamburger #hambuger .inner-hambuger:after {
  top: 0px;
  transform: rotate(90deg);
}
.header .menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .header .menu {
    display: none;
  }
}
.header .menu div.tab1,
.header .menu div.tab2 {
  width: 45rem;
  height: 4.9rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.header .menu div.tab1 > a.link,
.header .menu div.tab2 > a.link {
  background: url(../images/header-bg-btn.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 200%;
  width: 17.2rem;
  height: 4.9rem;
  position: relative;
  cursor: pointer;
  transition: 0.5s all;
  display: block;
  margin: 0 auto;
}
.header .menu div.tab1 > a.link:hover,
.header .menu div.tab2 > a.link:hover {
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 200%;
}
.header .menu div.tab1 > a.link > p.centered,
.header .menu div.tab2 > a.link > p.centered {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 1.5rem;
  text-transform: uppercase;
}
.header #toggle-hambuger:checked ~ .menu {
  display: block;
  position: absolute;
  top: 9rem;
  right: 0;
  width: 19rem;
  transition: 2s all;
  background-color: #2b080a;
  height: auto;
  width: auto;
  padding: 0.5rem;
  z-index: 5;
  border-radius: 0 0 5px 5px;
}
.header #toggle-hambuger:checked ~ .menu div.tab1,
.header #toggle-hambuger:checked ~ .menu div.tab2 {
  grid-template-columns: 1fr;
  width: 100%;
  height: auto;
}
.header #toggle-hambuger:checked ~ .menu div.tab1 .link,
.header #toggle-hambuger:checked ~ .menu div.tab2 .link {
  margin-bottom: 1rem;
}
.header .swing-in-top-fwd {
  -webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@-webkit-keyframes swing-in-top-fwd {
  0% {
    transform: rotateX(-100deg);
    transform-origin: top;
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg);
    transform-origin: top;
    opacity: 1;
  }
}
@keyframes swing-in-top-fwd {
  0% {
    transform: rotateX(-100deg);
    transform-origin: top;
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg);
    transform-origin: top;
    opacity: 1;
  }
}

.frame6 {
  position: relative;
  z-index: 2;
}
.frame6 div.bxh {
  display: flex;
  justify-content: start;
  align-items: start;
  margin-top: 8.5rem;
}
@media only screen and (max-width: 768px) {
  .frame6 div.bxh {
    flex-flow: column;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
  }
}
.frame6 div.bxh > div.col1 {
  width: calc(100% - 86.5rem);
  margin-top: -2rem;
}
@media only screen and (max-width: 768px) {
  .frame6 div.bxh > div.col1 {
    display: flex;
    width: 100%;
    position: relative;
    z-index: 2;
    padding: 0 3.5rem;
  }
}
.frame6 div.bxh > div.col1 .item {
  width: 10.4rem;
  height: 10.4rem;
  position: relative;
  margin: 6rem auto 14rem;
}
@media only screen and (max-width: 768px) {
  .frame6 div.bxh > div.col1 .item {
    margin: 6rem auto 9rem;
  }
}
.frame6 div.bxh > div.col1 .item img {
  width: 10rem;
}
.frame6 div.bxh > div.col1 .item-no1:before {
  content: "";
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../images/frame6-obj-no1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 22.2rem;
  height: 25.6rem;
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  .frame6 div.bxh > div.col1 .item-no1:before {
    width: 18.2rem;
    height: 21.6rem;
  }
}
.frame6 div.bxh > div.col1 .item-no2:before {
  content: "";
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../images/frame6-obj-no2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 22.2rem;
  height: 23.5rem;
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  .frame6 div.bxh > div.col1 .item-no2:before {
    top: 80%;
    width: 18.2rem;
    height: 19.5rem;
  }
}
@media only screen and (max-width: 768px) {
  .frame6 div.bxh > div.col1 .item-no2 img {
    margin-top: 1rem;
  }
}
.frame6 div.bxh > div.col1 .item-no3:before {
  content: "";
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../images/frame6-obj-no3.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 22.2rem;
  height: 22.4rem;
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  .frame6 div.bxh > div.col1 .item-no3:before {
    top: 85%;
    width: 18.2rem;
    height: 18.4rem;
  }
}
@media only screen and (max-width: 768px) {
  .frame6 div.bxh > div.col1 .item-no3 img {
    margin-top: 2rem;
  }
}
.frame6 div.bxh > div.col2 {
  position: relative;
  background: url(../images/frame6-bg-table.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 81.1rem;
  height: 86.7rem;
  padding: 1rem 0.8rem;
}
@media only screen and (max-width: 768px) {
  .frame6 div.bxh > div.col2 {
    background: url(../images/frame6-bg-table-mobi.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 76rem;
    height: 80.1rem;
  }
}
@media only screen and (max-width: 568px) {
  .frame6 div.bxh > div.col2 {
    background-size: 76rem, 80.1rem;
    width: 100%;
  }
}
.frame6 div.bxh > div.col2::before {
  content: "";
  position: absolute;
  top: -7rem;
  left: 50%;
  transform: translateX(-50%);
  background: url(../images/frame6-obj-table.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 82.6rem;
  height: 7rem;
}
@media only screen and (max-width: 768px) {
  .frame6 div.bxh > div.col2::before {
    top: -6.5rem;
  }
}
.frame6 div.bxh > div.col2 table {
  position: relative;
  width: 100%;
}
.frame6 div.bxh > div.col2 table tr {
  height: 4.8rem;
}
@media only screen and (max-width: 768px) {
  .frame6 div.bxh > div.col2 table tr {
    height: 4.46rem;
  }
}
.frame6 div.bxh > div.col2 table tr:last-child {
  height: 7.5rem;
}
@media only screen and (max-width: 768px) {
  .frame6 div.bxh > div.col2 table tr:last-child {
    height: 6.4rem;
  }
}
.frame6 div.bxh > div.col2 table tr th,
.frame6 div.bxh > div.col2 table tr td {
  text-align: center;
  vertical-align: middle;
  color: #87704e;
  font-size: 1.7rem;
}
.frame6 div.bxh > div.col2 table tr .medal {
  position: relative;
}
.frame6 div.bxh > div.col2 table tr .medal:before {
  content: "";
  position: absolute;
  top: 49%;
  left: 32%;
  transform: translate(-50%, -50%);
  background: url(../images/frame6-img-medal.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 5.8rem;
  height: 4.5rem;
}
.frame6 div.bxh > div.col2 table tr:first-child {
  height: 4.5rem;
}
@media only screen and (max-width: 768px) {
  .frame6 div.bxh > div.col2 table tr:first-child {
    height: 3.8rem;
  }
}
.frame6 div.bxh > div.col2 table tr:first-child th {
  font-size: 1.8rem;
  color: #87704e;
  text-transform: uppercase;
}
.frame6 div.bxh > div.col2 table tr:nth-child(2) td {
  color: #f1523c;
}
.frame6 div.bxh > div.col2 table tr:nth-child(2) .medal:before {
  background: url(../images/frame6-img-medal1.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 5.8rem;
  height: 4.5rem;
}
.frame6 div.bxh > div.col2 table tr:nth-child(3) td {
  color: #bf64f4;
}
.frame6 div.bxh > div.col2 table tr:nth-child(3) .medal:before {
  background: url(../images/frame6-img-medal2.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 5.8rem;
  height: 4.5rem;
}
.frame6 div.bxh > div.col2 table tr:nth-child(4) td {
  color: #cc6b35;
}
.frame6 div.bxh > div.col2 table tr:nth-child(4) .medal:before {
  background: url(../images/frame6-img-medal3.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 5.8rem;
  height: 4.5rem;
}
.frame6 div.bxh > div.col2 div.quick_text {
  margin: 2rem auto 0;
  text-align: center;
}
.frame6 div.bxh > div.col2 div.quick_text > p {
  color: #fff3c5;
  font-size: 1.7rem;
}

.frame7 {
  margin-top: 6rem;
}
@media only screen and (max-width: 768px) {
  .frame7 {
    margin-top: 8rem;
  }
}
.frame7 .row h6 {
  color: #f7db99;
  text-align: center;
  font-size: 2.5rem;
  background: -webkit-linear-gradient(#fff 52%, #eaa400);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
}
.frame7 div.info {
  background: url(../images/frame7-bg-form-user.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 87.1rem;
  height: 22.1rem;
  margin: 3.2rem auto 0;
  padding: 4.5rem 2.5rem 5.5rem 22rem;
}
@media only screen and (max-width: 768px) {
  .frame7 div.info {
    background: url(../images/frame2-bg-form-user-mobi.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 75.4rem;
    height: 13rem;
    padding: 0.7rem 2.5rem 0.7rem 2.5rem;
    margin: 8.2rem auto 0;
  }
}
@media only screen and (max-width: 568px) {
  .frame7 div.info {
    width: 100%;
    background-size: 100% 100%;
  }
}
@media only screen and (max-width: 480px) {
  .frame7 div.info {
    width: 100%;
    background-size: 100% 100%;
  }
}
@media only screen and (max-width: 413px) {
  .frame7 div.info {
    margin: 1.2rem auto 0;
  }
}
@media only screen and (max-width: 375px) {
  .frame7 div.info {
    padding: 0.7rem 1.5rem 0.7rem 0.5rem;
  }
}
.frame7 div.info > div.btn.btn__login {
  background: url(../images/frame2-btn-login.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 200%;
  width: 18.4rem;
  height: 5.4rem;
  transition: 1s all;
  margin: 2.9rem auto;
  position: relative;
}
.frame7 div.info > div.btn.btn__login:hover {
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 200%;
  -webkit-filter: brightness(1.1);
  filter: brightness(1.1);
}
.frame7 div.info > div.btn.btn__login:before {
  content: "";
  position: absolute;
  left: -13rem;
  top: 44%;
  transform: translateX(-50%);
  background: url(../images/frame2-btn-login-obj.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 19.7rem;
  height: 0.8rem;
  pointer-events: none;
}
.frame7 div.info > div.btn.btn__login:after {
  content: "";
  position: absolute;
  right: -33rem;
  top: 44%;
  transform: translateX(-50%) scaleX(-1);
  background: url(../images/frame2-btn-login-obj.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 19.7rem;
  height: 0.8rem;
  pointer-events: none;
}
.frame7 div.info > div.info__user {
  padding: 0.4rem 0;
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
  justify-content: space-between;
  align-items: center;
}
.frame7 div.info > div.info__user > div.col1 {
  display: flex;
  flex-flow: column;
  height: 100%;
  position: relative;
  justify-content: space-between;
  padding: 0.8rem 0 0.8rem 5rem;
  color: white;
  font-size: 1.5rem;
}
@media only screen and (max-width: 568px) {
  .frame7 div.info > div.info__user > div.col1 {
    font-size: 11px;
    padding: 0.8rem 0 0.8rem 2rem;
  }
}
@media only screen and (max-width: 375px) {
  .frame7 div.info > div.info__user > div.col1 {
    padding: 0.8rem 0 0.8rem 1rem;
  }
}
.frame7 div.info > div.info__user > div.col1 p {
  font-family: "avoregular";
}
.frame7 div.info > div.info__user > div.col1 > p:nth-of-type(2) > b.ef-number {
  color: red;
}
.frame7 div.info > div.info__user > div.col2.option {
  display: flex;
  height: 100%;
  position: relative;
  flex-flow: column;
  justify-content: center;
}
.frame7 div.info > div.info__user > div.col2.option > div.btn {
  background: url(../images/bg-btn.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 200%;
  width: 17.5rem;
  height: 4.8rem;
  position: relative;
  transition: 1s all;
}
.frame7 div.info > div.info__user > div.col2.option > div.btn:hover {
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 200%;
}
.frame7 div.info > div.info__user > div.col2.option > div.btn:hover p {
  color: white;
  -webkit-text-fill-color: unset;
}
.frame7 div.info > div.info__user > div.col2.option > div.btn p {
  width: 100%;
  text-align: center;
  background: -webkit-linear-gradient(#b53e00, #5d1a00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.3rem;
}
.frame7 div.row.grpbox {
  text-align: center;
}
.frame7 div.row.grpbox > h6 {
  font-size: 2rem;
  margin: 1.2rem 0 7rem;
}
@media only screen and (max-width: 768px) {
  .frame7 div.row.grpbox > h6 {
    margin: 5.2rem 0 10rem;
  }
}
@media only screen and (max-width: 413px) {
  .frame7 div.row.grpbox > h6 {
    margin: 5.2rem 0 0;
  }
}
.frame7 div.row.grpbox > div.list {
  display: flex;
  justify-content: space-between;
  width: 88.7rem;
  align-items: center;
  position: relative;
  margin: 0 auto;
  flex-flow: wrap;
}
@media only screen and (max-width: 768px) {
  .frame7 div.row.grpbox > div.list {
    width: 100%;
  }
}
.frame7 div.row.grpbox > div.list > div.item {
  max-width: 33%;
  margin: 0 auto;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .frame7 div.row.grpbox > div.list > div.item {
    margin: 0 auto 1rem;
  }
}
@media only screen and (max-width: 413px) {
  .frame7 div.row.grpbox > div.list > div.item {
    max-width: 55%;
  }
}
.frame7 div.row.grpbox > div.list > div.item > .number {
  position: absolute;
  right: 0;
  font-size: 2.6rem;
  right: 0;
  height: 3.6rem;
  line-height: 1.3;
  width: 3.6rem;
  background-color: #693715;
  border-radius: 75px;
  border: 1px solid #fdf6b6;
  color: #70090c;
  background: -webkit-linear-gradient(#ffdf93 52%, #ff9c00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.frame7 div.row.grpbox > div.list > div.item > div.img {
  text-align: center;
  width: 22.3rem;
  height: 24.4rem;
  margin: 0 auto;
}
.frame7 div.row.grpbox > div.list > div.item > div.img img {
  width: 100%;
  height: 100%;
}
.frame7 div.row.grpbox > div.list > div.item > div.btn {
  background: url(../images/bg-btn.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 200%;
  width: 17.5rem;
  height: 4.8rem;
  position: relative;
  margin: 0 auto;
}
.frame7 div.row.grpbox > div.list > div.item > div.btn p {
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  font-size: 1.5rem;
  color: white;
}
.frame7 div.row.grpbox > div.list > div.item > div.btn:hover {
  background: url(../images/bg-btn3.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 200%;
}
.frame7 div.row.grpbox > div.list .received .btn {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  cursor: no-drop;
}

.frame5 {
  margin-top: 3rem;
}
.frame5 .list__gift {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 95rem;
  margin: 5rem auto;
  grid-gap: 1.9rem;
}
@media only screen and (max-width: 768px) {
  .frame5 .list__gift {
    display: flex;
    width: 100%;
    margin: 7rem auto 5rem;
    padding: 0 3.5rem;
  }
}
.frame5 .list__gift-item {
  background: url(../images/frame3-bg-box.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 24.9rem;
  height: 33.4rem;
  padding-bottom: 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 6.3rem 6.3rem 6.3rem;
  align-content: end;
  grid-gap: 0.5rem;
  margin: 0 auto;
  position: relative;
}
.frame5 .list__gift-item .alert-total {
  position: absolute;
  top: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 19.8rem;
  height: 3rem;
  border: 1px solid #fdf6b6;
  border-radius: 1rem;
  background-color: #693715;
}
.frame5 .list__gift-item .alert-total p {
  width: 100%;
  color: white;
  font-size: 1.5rem;
  font-family: "avoregular";
}
.frame5 .list__gift-item .item {
  background: url(../images/frame3-bg-item.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 6.3rem;
  height: 6.3rem;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.frame5 .list__gift-item .item .number {
  position: absolute;
  right: 0rem;
  top: 0rem;
  font-family: "avoregular";
  font-size: 1.2rem;
  color: white;
  background: black;
  border-radius: 5px;
  padding: 0 5px;
}
.frame5 .list__gift-item .item img {
  width: 95%;
  height: 95%;
}
.frame5 .list__gift-btn {
  background: url(../images/bg-btn3.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 200%;
  width: 17.5rem;
  height: 4.8rem;
  margin: 1.6rem auto 0;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .frame5 .list__gift-btn {
    margin: 3.6rem auto 0;
  }
}
.frame5 .list__gift-btn:hover {
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 200%;
}
.frame5 .list__gift-btn p {
  color: white;
  font-size: 1.5rem;
  width: 100%;
  text-align: center;
}
.frame5 .list__gift-box.received {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}
.frame5 .list__gift-box.active .list__gift-btn {
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 200%;
  -webkit-animation: name duration timing-function delay iteration-count direction fill-mode;
  animation: name duration timing-function delay iteration-count direction fill-mode;
}
.frame5 .wobble-hor-bottom {
  -webkit-animation: wobble-hor-bottom 2s 2s both infinite ease-out;
  animation: wobble-hor-bottom 2s 2s both infinite ease-out;
}
@-webkit-keyframes wobble-hor-bottom {
  0%, 100% {
    transform: translateX(0%);
    transform-origin: 50% 50%;
  }
  15% {
    transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    transform: translateX(15px) rotate(6deg);
  }
  45% {
    transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    transform: translateX(-6px) rotate(-1.2deg);
  }
}
@keyframes wobble-hor-bottom {
  0%, 100% {
    transform: translateX(0%);
    transform-origin: 50% 50%;
  }
  15% {
    transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    transform: translateX(15px) rotate(6deg);
  }
  45% {
    transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    transform: translateX(-6px) rotate(-1.2deg);
  }
}

.frame4 {
  position: relative;
}
@media only screen and (max-width: 768px) {
  .frame4 .obj-char {
    position: absolute;
    right: -31rem;
    top: 43%;
    transform: translate(-50%, -50%);
    background: url(../images/obj-char.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 47.8rem;
    height: 80.1rem;
  }
}
@media only screen and (max-width: 480px) {
  .frame4 .obj-char {
    width: 41.8rem;
  }
}
@media only screen and (max-width: 360px) {
  .frame4 .obj-char {
    width: 37.8rem;
  }
}
.frame4 .row {
  position: relative;
}
.frame4 .row h6 {
  color: #f7db99;
  text-align: center;
  font-size: 2.5rem;
  background: -webkit-linear-gradient(#fff 52%, #eaa400);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
}
.frame4 .row .number {
  background: -webkit-linear-gradient(#ffdf93 52%, #ff9c00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.frame4 .lotrinh {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  width: 119rem;
  margin: 5.2rem auto;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .frame4 .lotrinh {
    width: 68.9rem;
    grid-template-columns: 1fr;
  }
}
.frame4 .lotrinh:before {
  content: "";
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110rem;
  height: 2rem;
  background-color: #520505;
}
@media only screen and (max-width: 768px) {
  .frame4 .lotrinh:before {
    left: 16.5%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}
.frame4 .lotrinh .bar-lo-trinh {
  position: absolute;
  width: 110rem;
  height: 0.4rem;
  overflow: hidden;
  left: 50%;
  top: 18%;
  transform: translate(-50%, -50%);
}
@media only screen and (max-width: 768px) {
  .frame4 .lotrinh .bar-lo-trinh {
    left: 16.5%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}
.frame4 .lotrinh .bar-lo-trinh span {
  position: absolute;
  top: 0;
  left: 0;
  height: 0.5rem;
  background-color: #ff5900;
}
.frame4 .lotrinh__item {
  width: 100%;
  height: 25rem;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}
@media only screen and (max-width: 768px) {
  .frame4 .lotrinh__item {
    width: 26.2rem;
    height: auto;
    flex-flow: row;
    align-items: center;
    justify-content: start;
    margin-left: 6rem;
    margin-bottom: 1rem;
  }
}
.frame4 .lotrinh__number {
  width: 8.6rem;
  height: 8.6rem;
  background-color: #530506;
  border-radius: 9rem;
  margin: 0 auto;
  position: relative;
}
.frame4 .lotrinh__border {
  width: 7.2rem;
  height: 7.2rem;
  border: 2px solid #e36d25;
  border-radius: 90px;
}
.frame4 .lotrinh__border p {
  text-align: center;
  width: 100%;
  font-size: 2rem;
  color: #fef9d9;
}
.frame4 .lotrinh__border b {
  font-size: 1.5rem;
}
.frame4 .lotrinh__img {
  width: 13.6rem;
  height: 13.6rem;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
}
.frame4 .lotrinh__img img {
  width: 55%;
}
.frame4 .lotrinh__img:before {
  content: "";
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../images/frame4-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 14.3rem;
  height: 14.6rem;
}
@media only screen and (max-width: 768px) {
  .frame4 .lotrinh__img:before {
    width: 13.9rem;
    height: 14.5rem;
  }
}
.frame4 .lotrinh .active .lotrinh__border {
  background: -webkit-linear-gradient(#fcf0d8, #ebcea2);
}
.frame4 .lotrinh .active .lotrinh__border p {
  color: #6b3a12;
}
.frame4 .lotrinh .active .lotrinh__img img {
  width: 55%;
  -webkit-animation: tada 1.5s linear infinite;
  animation: tada 1.5s linear infinite;
}
@-webkit-keyframes tada {
  0% {
    transform: translate(-50%, -50%) scale3d(1, 1, 1);
  }
  10%, 20% {
    transform: translate(-50%, -50%) scale3d(1, 1, 1) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    transform: translate(-50%, -50%) scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    transform: translate(-50%, -50%) scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg);
  }
  100% {
    transform: translate(-50%, -50%) scale3d(1, 1, 1);
  }
}
@keyframes tada {
  0% {
    transform: translate(-50%, -50%) scale3d(1, 1, 1);
  }
  10%, 20% {
    transform: translate(-50%, -50%) scale3d(1, 1, 1) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    transform: translate(-50%, -50%) scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    transform: translate(-50%, -50%) scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg);
  }
  100% {
    transform: translate(-50%, -50%) scale3d(1, 1, 1);
  }
}

.frame3 .title-main-content {
  margin: 7.1rem auto 0;
}
@media only screen and (max-width: 768px) {
  .frame3 .title-main-content {
    margin: 5.1rem auto 0;
  }
}
.frame3 div.info {
  background: url(../images/frame2-bg-form-user.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 88.9rem;
  height: 19.8rem;
  margin: 2.4rem auto 0;
  padding: 4.5rem 2.5rem 4.5rem 23rem;
}
@media only screen and (max-width: 768px) {
  .frame3 div.info {
    background: url(../images/frame2-bg-form-user-mobi.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 75.4rem;
    height: 13rem;
    padding: 0.7rem 2.5rem 0.7rem 2.5rem;
    margin: 6.4rem auto 0;
  }
}
@media only screen and (max-width: 568px) {
  .frame3 div.info {
    width: 100%;
    background-size: 100% 100%;
  }
}
@media only screen and (max-width: 480px) {
  .frame3 div.info {
    width: 100%;
    background-size: 100% 100%;
  }
}
@media only screen and (max-width: 375px) {
  .frame3 div.info {
    padding: 0.7rem 1.5rem 0.7rem 0.5rem;
  }
}
.frame3 div.info > div.btn.btn__login {
  background: url(../images/frame2-btn-login.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 200%;
  width: 18.4rem;
  height: 5.4rem;
  transition: 1s all;
  margin: 2.9rem auto;
  position: relative;
}
.frame3 div.info > div.btn.btn__login:hover {
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 200%;
  -webkit-filter: brightness(1.1);
  filter: brightness(1.1);
}
.frame3 div.info > div.btn.btn__login:before {
  content: "";
  position: absolute;
  left: -13rem;
  top: 44%;
  transform: translateX(-50%);
  background: url(../images/frame2-btn-login-obj.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 19.7rem;
  height: 0.8rem;
  pointer-events: none;
}
.frame3 div.info > div.btn.btn__login:after {
  content: "";
  position: absolute;
  right: -33rem;
  top: 44%;
  transform: translateX(-50%) scaleX(-1);
  background: url(../images/frame2-btn-login-obj.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 19.7rem;
  height: 0.8rem;
  pointer-events: none;
}
.frame3 div.info > div.info__user {
  padding: 0.4rem 0;
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
  justify-content: space-between;
  align-items: center;
}
.frame3 div.info > div.info__user > div.col1 {
  display: flex;
  flex-flow: column;
  height: 100%;
  position: relative;
  justify-content: space-between;
  padding: 0.8rem 0 0.8rem 5rem;
  color: white;
  font-size: 1.5rem;
}
@media only screen and (max-width: 568px) {
  .frame3 div.info > div.info__user > div.col1 {
    font-size: 11px;
    padding: 0.8rem 0 0.8rem 2rem;
  }
}
@media only screen and (max-width: 375px) {
  .frame3 div.info > div.info__user > div.col1 {
    padding: 0.8rem;
  }
}
.frame3 div.info > div.info__user > div.col1 p {
  font-family: "avoregular";
}
.frame3 div.info > div.info__user > div.col1 > p:nth-of-type(2) > b.ef-number {
  color: red;
}
.frame3 div.info > div.info__user > div.col2.option {
  display: flex;
  height: 100%;
  position: relative;
  flex-flow: column;
  justify-content: space-between;
}
.frame3 div.info > div.info__user > div.col2.option > div.btn {
  background: url(../images/bg-btn.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 200%;
  width: 17.5rem;
  height: 4.8rem;
  position: relative;
  transition: 1s all;
}
.frame3 div.info > div.info__user > div.col2.option > div.btn:hover {
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 200%;
}
.frame3 div.info > div.info__user > div.col2.option > div.btn:hover p {
  color: white;
  -webkit-text-fill-color: unset;
}
.frame3 div.info > div.info__user > div.col2.option > div.btn p {
  width: 100%;
  text-align: center;
  background: -webkit-linear-gradient(#b53e00, #5d1a00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.3rem;
}
@media only screen and (max-width: 568px) {
  .frame3 div.info > div.info__user > div.col2.option > div.btn p {
    font-size: 11px;
  }
}
.frame3 .row h6 {
  color: #f7db99;
  text-align: center;
  font-size: 2.5rem;
  background: -webkit-linear-gradient(#fff 52%, #eaa400);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
}
@media only screen and (max-width: 768px) {
  .frame3 .total {
    margin-top: 4rem;
  }
}
.frame3 .total div.total__form {
  width: 75rem;
  height: 19.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6rem 0;
  margin: 5.5rem auto 4rem;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 568px) {
  .frame3 .total div.total__form {
    width: 95%;
  }
}
.frame3 .total div.total__form:before {
  content: "";
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #edc596;
  width: 100%;
  height: 1rem;
  z-index: -1;
}
.frame3 .total div.total__form:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../images/frame3-bg-total.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 118.7rem;
  height: 22.7rem;
  z-index: -2;
}
.frame3 .total div.total__form-item {
  background: url(../images/frame3-item1.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 9.8rem;
  height: 14.1rem;
  padding: 0.5rem;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  cursor: pointer;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}
@media only screen and (max-width: 375px) {
  .frame3 .total div.total__form-item {
    width: 8.8rem;
    height: 13.1rem;
  }
}
.frame3 .total div.total__form-name {
  text-align: center;
  font-size: 2.8rem;
  background: -webkit-linear-gradient(#ed6700, #bd0204);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.frame3 .total div.total__form-number {
  width: 6rem;
  height: 6rem;
  border-radius: 9rem;
  background-color: #fede4e;
  background: -webkit-linear-gradient(#ffe856, #faa11e);
  -webkit-text-fill-color: transparent;
  -webkit-filter: brightness(1.1);
  filter: brightness(1.1);
  box-shadow: 1px 1px 10px #000000c2;
  margin: 0 auto;
  position: relative;
}
.frame3 .total div.total__form-number p {
  z-index: 5;
  width: 100%;
  text-align: center;
  font-size: 2rem;
  background: -webkit-linear-gradient(#e84230, #bc0a13);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-filter: brightness(1.1);
  filter: brightness(1.1);
  text-shadow: 1px 1px 20px #00000085;
}
.frame3 .total div.total__form .active {
  -webkit-filter: unset;
  filter: unset;
}
.frame3 .list__gift {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  width: 114rem;
  margin: 4.3rem auto;
  grid-gap: 4rem;
}
@media only screen and (max-width: 768px) {
  .frame3 .list__gift {
    display: flex;
    width: 100%;
    margin: 5.3rem auto;
    padding: 0 3.5rem;
  }
}
.frame3 .list__gift-item {
  background: url(../images/frame3-bg-box.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 24.9rem;
  height: 33.4rem;
  padding-bottom: 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 6.3rem 6.3rem 6.3rem;
  align-content: end;
  grid-gap: 0.5rem;
  margin: 0 auto;
}
.frame3 .list__gift-item .alert-total {
  position: absolute;
  top: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 19.8rem;
  height: 3rem;
  border: 1px solid #fdf6b6;
  border-radius: 1rem;
  background-color: #693715;
}
.frame3 .list__gift-item .alert-total p {
  width: 100%;
  color: white;
  font-size: 1.5rem;
  font-family: "avoregular";
}
.frame3 .list__gift-item .item {
  background: url(../images/frame3-bg-item.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 6.3rem;
  height: 6.3rem;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.frame3 .list__gift-item .item .number {
  position: absolute;
  right: 0rem;
  top: 0rem;
  font-family: "avoregular";
  font-size: 1.2rem;
  color: white;
  background: black;
  border-radius: 5px;
  padding: 0 5px;
}
.frame3 .list__gift-item .item img {
  width: 95%;
  height: 95%;
}
.frame3 .list__gift-yeucau {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0;
}
.frame3 .list__gift-yeucau .item-need {
  background: url(../images/frame3-bg-item2.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 6.9rem;
  height: 6.9rem;
  text-align: center;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  flex-flow: column;
}
@media only screen and (max-width: 480px) {
  .frame3 .list__gift-yeucau .item-need {
    min-width: 56px;
    min-height: 56px;
  }
}
.frame3 .list__gift-yeucau .item-need p {
  font-size: 1.6rem;
  color: #ffd1a7;
  line-height: 1;
}
@media only screen and (max-width: 480px) {
  .frame3 .list__gift-yeucau .item-need p {
    font-size: 11px;
  }
}
.frame3 .list__gift-yeucau .item-need p.text {
  background: -webkit-linear-gradient(#ffffff, #d88f1b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-filter: brightness(1.1);
  filter: brightness(1.1);
}
.frame3 .list__gift-yeucau2 {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0;
  align-items: center;
}
.frame3 .list__gift-yeucau2 .item-need {
  background: url(../images/frame3-bg-item2.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 6.9rem;
  height: 6.9rem;
  text-align: center;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  flex-flow: column;
}
@media only screen and (max-width: 480px) {
  .frame3 .list__gift-yeucau2 .item-need {
    min-width: 56px;
    min-height: 56px;
  }
}
.frame3 .list__gift-yeucau2 .item-need p {
  font-size: 1.6rem;
  color: #ffd1a7;
  line-height: 1;
}
.frame3 .list__gift-yeucau2 .item-need p.text {
  background: -webkit-linear-gradient(#ffffff, #d88f1b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-filter: brightness(1.1);
  filter: brightness(1.1);
}
.frame3 .list__gift-yeucau2 .plus {
  background: url(../images/frame3-plus.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 1.8rem;
  height: 1.9rem;
  margin: 0 2rem;
}
.frame3 .list__gift-yeucau3 {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0;
  align-items: center;
  height: 6.9rem;
}
.frame3 .list__gift-yeucau3 .item-need {
  background: url(../images/frame3-bg-item2.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 5.7rem;
  height: 5.7rem;
  text-align: center;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  flex-flow: column;
}
@media only screen and (max-width: 480px) {
  .frame3 .list__gift-yeucau3 .item-need {
    width: 6.9rem;
    height: 6.9rem;
    min-width: 56px;
    min-height: 56px;
  }
}
.frame3 .list__gift-yeucau3 .item-need p {
  font-size: 1.23rem;
  color: #ffd1a7;
  line-height: 1;
}
@media only screen and (max-width: 480px) {
  .frame3 .list__gift-yeucau3 .item-need p {
    font-size: 11px;
  }
}
.frame3 .list__gift-yeucau3 .item-need p.text {
  background: -webkit-linear-gradient(#ffffff, #d88f1b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-filter: brightness(1.1);
  filter: brightness(1.1);
}
.frame3 .list__gift-yeucau3 .plus {
  background: url(../images/frame3-plus.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 0.9rem;
  height: 0.9rem;
}
.frame3 .list__gift-btn {
  background: url(../images/bg-btn3.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 200%;
  width: 17.5rem;
  height: 4.8rem;
  margin: 0 auto;
  position: relative;
}
.frame3 .list__gift-btn:hover {
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 200%;
}
.frame3 .list__gift-btn p {
  color: white;
  font-size: 1.5rem;
  width: 100%;
  text-align: center;
}
.frame3 .list__gift-btn.received {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  cursor: no-drop;
}
.frame3 .list__gift-btn.active {
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 200%;
}

.frame2 {
  position: relative;
}
.frame2 .row {
  position: relative;
}
.frame2 .yh1 {
  width: 16.82291667vw;
  height: 14.94791667vw;
  position: absolute;
  right: 0;
  top: -14%;
  -webkit-animation: firing 1.5s ease infinite;
  animation: firing 1.5s ease infinite;
}
.frame2 .yh2 {
  width: 8.85416667vw;
  height: 12.13541667vw;
  position: absolute;
  left: 0%;
  bottom: 0;
  -webkit-animation: firing 1.5s 0.5s ease infinite;
  animation: firing 1.5s 0.5s ease infinite;
}
.frame2 div.info {
  background: url(../images/frame2-bg-form-user.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 88.9rem;
  height: 19.8rem;
  margin: 2.4rem auto 0;
  padding: 4.5rem 2.5rem 4.5rem 23rem;
}
@media only screen and (max-width: 768px) {
  .frame2 div.info {
    background: url(../images/frame2-bg-form-user-mobi.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 75.4rem;
    height: 13rem;
    padding: 0.7rem 2.5rem 0.7rem 2.5rem;
    margin: 5.4rem auto 0;
  }
}
@media only screen and (max-width: 568px) {
  .frame2 div.info {
    width: 100%;
    background-size: 100% 100%;
  }
}
@media only screen and (max-width: 480px) {
  .frame2 div.info {
    position: relative;
    z-index: 2;
  }
}
@media only screen and (max-width: 375px) {
  .frame2 div.info {
    padding: 0.7rem 1.5rem 0.7rem 0.5rem;
  }
}
.frame2 div.info > div.btn.btn__login {
  background: url(../images/frame2-btn-login.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 200%;
  width: 18.4rem;
  height: 5.4rem;
  transition: 1s all;
  margin: 2.9rem auto;
  position: relative;
}
.frame2 div.info > div.btn.btn__login:hover {
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 200%;
  -webkit-filter: brightness(1.1);
  filter: brightness(1.1);
}
.frame2 div.info > div.btn.btn__login:before {
  content: "";
  position: absolute;
  left: -13rem;
  top: 44%;
  transform: translateX(-50%);
  background: url(../images/frame2-btn-login-obj.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 19.7rem;
  height: 0.8rem;
  pointer-events: none;
}
.frame2 div.info > div.btn.btn__login:after {
  content: "";
  position: absolute;
  right: -33rem;
  top: 44%;
  transform: translateX(-50%) scaleX(-1);
  background: url(../images/frame2-btn-login-obj.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 19.7rem;
  height: 0.8rem;
  pointer-events: none;
}
.frame2 div.info > div.info__user {
  padding: 0.4rem 0;
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
  justify-content: space-between;
  align-items: center;
}
.frame2 div.info > div.info__user > div.col1 {
  display: flex;
  flex-flow: column;
  height: 100%;
  position: relative;
  justify-content: space-between;
  padding: 0.8rem 0 0.8rem 5rem;
  color: white;
  font-size: 1.5rem;
}
@media only screen and (max-width: 568px) {
  .frame2 div.info > div.info__user > div.col1 {
    font-size: 11px;
    padding: 0.8rem 0 0.8rem 2rem;
  }
}
@media only screen and (max-width: 375px) {
  .frame2 div.info > div.info__user > div.col1 {
    padding: 0.8rem;
  }
}
.frame2 div.info > div.info__user > div.col1 p {
  font-family: "avoregular";
}
.frame2 div.info > div.info__user > div.col1 > p:nth-of-type(2) > b.ef-number {
  color: red;
}
.frame2 div.info > div.info__user > div.col2.option {
  display: flex;
  height: 100%;
  position: relative;
  flex-flow: column;
  justify-content: space-between;
}
.frame2 div.info > div.info__user > div.col2.option > div.btn {
  background: url(../images/bg-btn.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 200%;
  width: 17.5rem;
  height: 4.8rem;
  position: relative;
  transition: 1s all;
}
.frame2 div.info > div.info__user > div.col2.option > div.btn:hover {
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 200%;
}
.frame2 div.info > div.info__user > div.col2.option > div.btn:hover p {
  color: white;
  -webkit-text-fill-color: unset;
}
.frame2 div.info > div.info__user > div.col2.option > div.btn p {
  width: 100%;
  text-align: center;
  background: -webkit-linear-gradient(#b53e00, #5d1a00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.3rem;
}
@media only screen and (max-width: 568px) {
  .frame2 div.info > div.info__user > div.col2.option > div.btn p {
    font-size: 11px;
  }
}
.frame2 div.obj-tree {
  width: 64.9rem;
  height: 57.4rem;
  margin: -2rem auto 0;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .frame2 div.obj-tree {
    margin: 5rem auto 0;
  }
}
.frame2 div.obj-tree img {
  position: relative;
  width: 76.3rem;
  height: 57.4rem;
  margin-left: -7rem;
}
@media only screen and (max-width: 480px) {
  .frame2 div.obj-tree img {
    margin-left: -11rem;
  }
}
.frame2 div.obj-tree .baolixi {
  background: url(../images/obj-baolixi.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 7rem;
  height: 8.9rem;
  position: absolute;
  z-index: 5;
  transition: all 0.1s;
  cursor: pointer;
}
.frame2 div.obj-tree .baolixi:hover {
  border: 0.1rem solid #f6ce35;
  border-radius: 5px;
  background-color: #f6ce35;
}
.frame2 div.obj-tree .baolixi__active {
  border: 0.1rem solid #f6ce35;
  border-radius: 5px;
  background-color: #f6ce35;
}
.frame2 div.obj-tree .baolixi__1 {
  top: 24rem;
  right: 23rem;
}
@media only screen and (max-width: 480px) {
  .frame2 div.obj-tree .baolixi__1 {
    top: 24rem;
    right: 27rem;
  }
}
.frame2 div.obj-tree .baolixi__2 {
  right: 20rem;
  top: 10rem;
  transform: rotate(-32deg);
}
@media only screen and (max-width: 480px) {
  .frame2 div.obj-tree .baolixi__2 {
    right: 20rem;
    top: 14rem;
    transform: rotate(-32deg);
  }
}
.frame2 div.obj-tree .baolixi__3 {
  right: 15rem;
  bottom: 16rem;
  transform: rotate(27deg);
}
.frame2 div.obj-tree .baolixi__4 {
  top: 11rem;
  left: 21rem;
  transform: rotate(37deg);
}
.frame2 div.obj-tree .baolixi__5 {
  left: 2rem;
  top: 18rem;
  transform: rotate(45deg);
}
.frame2 div.obj-tree .baolixi__6 {
  bottom: 14rem;
  left: 6rem;
  transform: rotate(-26deg);
}
.frame2 div.obj-tree .obj-box {
  position: absolute;
  left: -12rem;
  bottom: 5rem;
  background: url(../images/frame2-obj-box.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 23rem;
  height: 25rem;
  z-index: 0;
}
.frame2 div.obj-tree .obj-nhanvat {
  position: absolute;
  right: -27rem;
  bottom: 9rem;
  background: url(../images/frame2-obj-nhanvat.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 44.2rem;
  height: 47.8rem;
}
.frame2 div.obj-tree .effect-coin {
  background: url(../images/Layer1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 3.4rem;
  height: 3.4rem;
  position: absolute;
  left: 35rem;
  -webkit-filter: brightness(1.1);
  filter: brightness(1.1);
}
.frame2 div.obj-tree .animation_coin {
  -webkit-animation: fade-out 0.5s infinite linear;
  animation: fade-out 0.5s infinite linear;
}
.frame2 div.grp-btn {
  display: flex;
  flex-flow: row;
  justify-content: center;
  margin-top: 1.5rem;
}
.frame2 div.grp-btn div.btn {
  position: relative;
  width: 25.6rem;
  height: 7.8rem;
  font-size: 2.2rem;
}
.frame2 div.grp-btn div.btn:first-child {
  margin-right: 1.5rem;
}
.frame2 div.grp-btn div.btn:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background: url(../images/bg-btn2.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 200%;
  width: 100%;
  height: 9rem;
}
.frame2 div.grp-btn div.btn p {
  text-align: center;
  width: 100%;
  background: -webkit-linear-gradient(#b53e00, #5d1a00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.frame2 div.grp-btn div.btn:hover:before {
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 200%;
}
.frame2 div.grp-btn div.btn:hover p {
  color: white;
  -webkit-text-fill-color: unset;
}
@-webkit-keyframes firing {
  0% {
    -webkit-transform: scale(0.5) translate(0);
    transform-origin: center center;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform-origin: center center;
    opacity: 0;
  }
}
@keyframes firing {
  0% {
    -webkit-transform: scale(0.5) translate(0);
    transform-origin: center center;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform-origin: center center;
    opacity: 0;
  }
}

.frame1 {
  padding-top: 12rem;
  width: auto;
  height: 98rem;
  max-width: 1920px;
}
.frame1 .bgm-cd {
  width: 9rem;
  height: 9rem;
  background-image: url(../images/di.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: fixed;
  right: 0.7rem;
  top: 9.7rem;
  z-index: 3;
}
.frame1 .bgm-cd .playing-cd {
  width: 7rem;
  height: 7rem;
  position: absolute;
  top: 10%;
  left: -36%;
  background-image: url(../images/cd-big.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.frame1 .bgm-cd .bigcd-anim {
  -webkit-animation: circle1 3s 0.5s infinite linear;
  animation: circle1 3s 0.5s infinite linear;
}
.frame1 .bgm-cd .playing-control {
  width: 4.4rem;
  height: 2.8rem;
  position: absolute;
  top: 13%;
  left: -2.4rem;
  background-image: url(../images/cd-play.png);
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(50deg);
  -ms-transform: rotate(50deg);
  -moz-transform: rotate(50deg);
  -webkit-transform: rotate(50deg);
  -o-transform: rotate(50deg);
  transform-origin: right 80%;
  -ms-transform-origin: right 80%;
  -moz-transform-origin: right 80%;
  -webkit-transform-origin: right 80%;
  -o-transform-origin: right 80%;
}
.frame1 .bgm-cd .control-anim {
  -webkit-animation: rotate1 1s 1 forwards;
  animation: rotate1 1s 1 forwards;
}
.frame1 .bgm-cd .cd-info {
  width: 10.5rem;
  height: 10.1rem;
  background-image: url(../images/cd-content.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -8%;
  left: -12%;
}
.frame1 .bgm-cd .cd-info .play-button {
  width: 7rem;
  height: 7rem;
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  cursor: pointer;
}
.frame1 .bgm-cd .cd-info .play-button img {
  width: 100%;
}
.frame1 .slogan {
  mask-image: url(https://haitacdaichien.vn/assets/frontend/events/tet2021/assets/images/frame1-img-slogan.png);
  -webkit-mask-image: url(https://haitacdaichien.vn/assets/frontend/events/tet2021/assets/images/frame1-img-slogan.png);
  -moz-mask-image: url(https://haitacdaichien.vn/assets/frontend/events/tet2021/assets/images/frame1-img-slogan.png);
  -o-mask-image: url(https://haitacdaichien.vn/assets/frontend/events/tet2021/assets/images/frame1-img-slogan.png);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -moz-mask-repeat: no-repeat;
  mask-size: 100%;
  -webkit-mask-size: 100%;
  -moz-mask-size: 100%;
  -o-mask-size: 100%;
  background: url(https://haitacdaichien.vn/assets/frontend/events/tet2021/assets/images/frame1-img-slogan.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 51.8rem;
  height: 16.1rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 375px) {
  .frame1 .slogan {
    width: 49.8rem;
    height: 14.1rem;
    -webkit-mask-image: unset;
    mask-image: unset;
  }
}
.frame1 .slogan::before {
  position: absolute;
  content: "";
  top: 8rem;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12rem;
  width: 50rem;
  background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.7), transparent);
  animation: animte_glass 4s linear infinite;
  -webkit-animation: animte_glass 4s linear infinite;
  mix-blend-mode: overlay;
}
@media only screen and (max-width: 375px) {
  .frame1 .slogan::before {
    display: none;
  }
}
.frame1 .date {
  position: relative;
  width: 37.8rem;
  height: 5.1rem;
  background: url(../images/frame1-obj-date.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  margin: 0 auto;
  z-index: 1;
}
.frame1 .date p {
  width: 100%;
  text-align: center;
  color: white;
  font-size: 2.4rem;
}
.frame1 .obj-tree {
  position: relative;
  width: 76.3rem;
  height: 57.4rem;
  margin: -3rem auto 0;
  pointer-events: none;
  z-index: 0;
}
@media only screen and (max-width: 768px) {
  .frame1 .obj-tree {
    width: 65.3rem;
  }
}
@media only screen and (max-width: 480px) {
  .frame1 .obj-tree {
    width: 56.3rem;
  }
}
@media only screen and (max-width: 375px) {
  .frame1 .obj-tree {
    width: 52.3rem;
  }
}
.frame1 .obj-tree:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../images/frame1-obj-tree.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.frame1 .obj-tree .obj-char1 {
  position: absolute;
  background: url(../images/frame1-obj-char.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 47rem;
  height: 77.6rem;
  bottom: -7.2rem;
  right: -39rem;
}
.frame1 .obj-tree .obj-char2 {
  position: absolute;
  left: -35rem;
  bottom: 7rem;
  background: url(../images/frame1-obj-char2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 50.9rem;
  height: 67.1rem;
  z-index: -1;
}
.frame1 .obj-tree .obj-text1 {
  position: absolute;
  background: url(../images/frame1-obj-text2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 26.4rem;
  height: 35.4rem;
  top: 23rem;
  left: 12rem;
  transform-origin: 50% 0;
  webkit-animation: swinging 4.5s ease-in-out forwards infinite;
  -webkit-animation: swinging 4.5s ease-in-out forwards infinite;
  animation: swinging 4.5s ease-in-out forwards infinite;
}
@media only screen and (max-width: 768px) {
  .frame1 .obj-tree .obj-text1 {
    width: 16.4rem;
    height: 25.4rem;
    top: 20rem;
    left: 15rem;
  }
}
@media only screen and (max-width: 480px) {
  .frame1 .obj-tree .obj-text1 {
    top: 23rem;
    left: 12rem;
  }
}
.frame1 .obj-tree .obj-text2 {
  position: absolute;
  background: url(../images/frame1-obj-text.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 29.9rem;
  height: 39.9rem;
  top: 19rem;
  left: 39rem;
  transform-origin: 50% 0;
  webkit-animation: swinging 4.7s ease-in-out forwards infinite;
  -webkit-animation: swinging 4.7s ease-in-out forwards infinite;
  animation: swinging 4.7s ease-in-out forwards infinite;
}
@media only screen and (max-width: 768px) {
  .frame1 .obj-tree .obj-text2 {
    width: 19.9rem;
    height: 29.9rem;
    top: 16rem;
    left: 36rem;
  }
}
@media only screen and (max-width: 480px) {
  .frame1 .obj-tree .obj-text2 {
    top: 18rem;
    left: 30rem;
  }
}
@media only screen and (max-width: 375px) {
  .frame1 .obj-tree .obj-text2 {
    left: 28rem;
  }
}
.frame1 .btn-hailoc {
  width: 26.9rem;
  height: 7.8rem;
  position: relative;
  margin: 1rem auto;
  cursor: pointer;
  transition: all 0.5s;
}
.frame1 .btn-hailoc:hover {
  -webkit-filter: brightness(1.1);
  filter: brightness(1.1);
}
.frame1 .btn-hailoc:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: url(../images/frame1-bg-btn.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 100%;
  height: 9rem;
}
.frame1 .btn-hailoc p {
  width: 100%;
  text-align: center;
  font-size: 2.2rem;
  background: -webkit-linear-gradient(#ff5c00, #4b1300);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  line-height: 1.5;
  color: #febd22;
}
.frame1 .vibrate-1 {
  -webkit-animation: vibrate-1 0.3s linear infinite both;
  animation: vibrate-1 0.3s linear infinite both;
}
.frame1 .rotate-in-2-br-ccw {
  -webkit-animation: rotate-in-2-br-ccw 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: rotate-in-2-br-ccw 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.frame1 .slide-in-elliptic-top-fwd {
  -webkit-animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.frame1 .fade-in-bl {
  -webkit-animation: fade-in-bl 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in-bl 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
@-webkit-keyframes circle1 {
  0% {
    transform: rotate(0);
    -ms-transform: rotate(0);
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
    -o-transform: rotate(0);
    transform-origin: center center;
    -ms-transform-origin: center center;
    -moz-transform-origin: center center;
    -webkit-transform-origin: center center;
    -o-transform-origin: center center;
  }
  100% {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform-origin: center center;
    -ms-transform-origin: center center;
    -moz-transform-origin: center center;
    -webkit-transform-origin: center center;
    -o-transform-origin: center center;
  }
}
@keyframes circle1 {
  0% {
    transform: rotate(0);
    -ms-transform: rotate(0);
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
    -o-transform: rotate(0);
    transform-origin: center center;
    -ms-transform-origin: center center;
    -moz-transform-origin: center center;
    -webkit-transform-origin: center center;
    -o-transform-origin: center center;
  }
  100% {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform-origin: center center;
    -ms-transform-origin: center center;
    -moz-transform-origin: center center;
    -webkit-transform-origin: center center;
    -o-transform-origin: center center;
  }
}
@-webkit-keyframes rotate1 {
  0% {
    transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    -moz-transform: rotate(50deg);
    -webkit-transform: rotate(50deg);
    -o-transform: rotate(50deg);
    transform-origin: right 80%;
    -ms-transform-origin: right 80%;
    -moz-transform-origin: right 80%;
    -webkit-transform-origin: right 80%;
    -o-transform-origin: right 80%;
  }
  100% {
    left: -22%;
    transform: rotate(0);
    -ms-transform: rotate(0);
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
    -o-transform: rotate(0);
    transform-origin: right 80%;
    -ms-transform-origin: right 80%;
    -moz-transform-origin: right 80%;
    -webkit-transform-origin: right 80%;
    -o-transform-origin: right 80%;
  }
}
@keyframes rotate1 {
  0% {
    transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    -moz-transform: rotate(50deg);
    -webkit-transform: rotate(50deg);
    -o-transform: rotate(50deg);
    transform-origin: right 80%;
    -ms-transform-origin: right 80%;
    -moz-transform-origin: right 80%;
    -webkit-transform-origin: right 80%;
    -o-transform-origin: right 80%;
  }
  100% {
    left: -22%;
    transform: rotate(0);
    -ms-transform: rotate(0);
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
    -o-transform: rotate(0);
    transform-origin: right 80%;
    -ms-transform-origin: right 80%;
    -moz-transform-origin: right 80%;
    -webkit-transform-origin: right 80%;
    -o-transform-origin: right 80%;
  }
}
@-webkit-keyframes vibrate-1 {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}
@keyframes vibrate-1 {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}
@-webkit-keyframes animte_glass {
  0% {
    transform: scale3d(1.2, 1.2, 1.2) rotate3d(0, 0, 1, -45deg) translate3d(-10%, -300%, 0);
  }
  50%, 100% {
    transform: scale3d(1.2, 1.2, 1.2) rotate3d(0, 0, 1, -45deg) translate3d(-10%, 300%, 0);
  }
}
@keyframes animte_glass {
  0% {
    transform: scale3d(1.2, 1.2, 1.2) rotate3d(0, 0, 1, -45deg) translate3d(-10%, -300%, 0);
  }
  50%, 100% {
    transform: scale3d(1.2, 1.2, 1.2) rotate3d(0, 0, 1, -45deg) translate3d(-10%, 300%, 0);
  }
}
@-webkit-keyframes slide-in-elliptic-top-fwd {
  0% {
    transform: translateY(-600px) rotateX(-30deg) scale(0);
    transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    transform: translateY(0) rotateX(0) scale(1);
    transform-origin: 50% 1400px;
    opacity: 1;
  }
}
@keyframes slide-in-elliptic-top-fwd {
  0% {
    transform: translateY(-600px) rotateX(-30deg) scale(0);
    transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    transform: translateY(0) rotateX(0) scale(1);
    transform-origin: 50% 1400px;
    opacity: 1;
  }
}
@-webkit-keyframes rotate-in-2-br-ccw {
  0% {
    transform: rotate(45deg);
    transform-origin: 100% 100%;
    opacity: 0;
  }
  100% {
    transform: rotate(0);
    transform-origin: 100% 100%;
    opacity: 1;
  }
}
@keyframes rotate-in-2-br-ccw {
  0% {
    transform: rotate(45deg);
    transform-origin: 100% 100%;
    opacity: 0;
  }
  100% {
    transform: rotate(0);
    transform-origin: 100% 100%;
    opacity: 1;
  }
}
@-webkit-keyframes fade-in-bl {
  0% {
    transform: translateX(-50px) translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-bl {
  0% {
    transform: translateX(-50px) translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes swinging {
  0% {
    transform: rotate(10deg);
    -webkit-filter: brightness(1);
    filter: brightness(1);
  }
  50% {
    transform: rotate(-5deg);
    -webkit-filter: brightness(1.1);
    filter: brightness(1.1);
  }
  100% {
    transform: rotate(10deg);
    -webkit-filter: brightness(1);
    filter: brightness(1);
  }
}
@keyframes swinging {
  0% {
    transform: rotate(10deg);
    -webkit-filter: brightness(1);
    filter: brightness(1);
  }
  50% {
    transform: rotate(-5deg);
    -webkit-filter: brightness(1.1);
    filter: brightness(1.1);
  }
  100% {
    transform: rotate(10deg);
    -webkit-filter: brightness(1);
    filter: brightness(1);
  }
}