@font-face {
  font-family: "dtac_together";
  src: url("../fonts/dtactogether_th2013.eot?") format("eot"),
    url("../fonts/dtactogether_th2013.woff") format("woff"),
    url("../fonts/dtactogether_th2013.ttf") format("truetype"),
    url("../fonts/dtactogether_th2013.svg#dtac_togetherth_2013regular")
      format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "dtac";
  src: url("../fonts/dtac.eot?") format("eot"),
    url("../fonts/dtac.woff") format("woff"),
    url("../fonts/dtac.ttf") format("truetype"),
    url("../fonts/dtac.svg#dtac") format("svg");
  font-weight: normal;
  font-style: normal;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scale3d(0.6, 0.6, 0.6);
    transform: scale3d(0.6, 0.6, 0.6);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes zoomIn {
  0% {
    opacity: 1;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  100% {
    opacity: 0;
  }
}
@keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes slideInLeft {
  0% {
    left: 0%;
    opacity: 0;
  }
  50% {
    left: 75%;
    opacity: 1;
  }
  100% {
    left: 75%;
    opacity: 1;
  }
}
@keyframes bounceIn {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes ScaleBotton {
  0% {
    transform: scale(1);
  }
  15% {
    transform: scale(0.5);
  }
  20% {
    transform: scale(1.2);
  }
  25% {
    transform: scale(0.9);
  }
  30% {
    transform: scale(1.05);
  }
  35% {
    transform: scale(1);
  }
}
@keyframes ShadowBox {
  0% {
    opacity: 0;
  }
  19% {
    opacity: 0;
    transform: scale(1);
  }
  20% {
    opacity: 1;
    transform: scale(1);
  }
  40% {
    opacity: 0;
    transform: scale(1.5);
  }
  41% {
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes slideMe {
  50% {
    left: 65px;
  }
  85% {
    left: 30px;
  }
  100% {
    left: 65px;
  }
}
@keyframes flipBox {
  0% {
    transform: rotateY(0deg);
  }
  30% {
    transform: rotateY(0deg);
  }
  40% {
    transform: rotateY(180deg);
  }
  90% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
.bar-gradient {
  opacity: 0.64;
  background: #0f2d4b;
  /* Old Browsers */
  background: -moz-linear-gradient(top, #0f2d4b 0%, #1478dd 100%);
  /* FF3.6+ */
  background: -webkit-gradient(
    left top,
    left bottom,
    color-stop(0%, #0f2d4b),
    color-stop(100%, #1478dd)
  );
  /* Chrome, Safari4+ */
  background: -webkit-linear-gradient(top, #0f2d4b 0%, #1478dd 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #0f2d4b 0%, #1478dd 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #0f2d4b 0%, #1478dd 100%);
  /* IE 10+ */
  background: linear-gradient(to bottom, #0f2d4b 0%, #1478dd 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0F2D4B', endColorstr='#1478DD', GradientType=0 );
  /* IE6-9 */
}

.btn-gradient,
#menu4menu1list .console .pattern .box.active span,
#menu4menu2 .console .pattern .box.active span,
#menu4menu3 .console .pattern .box.active span {
  background-color: #00a5e5;
}

.text-shadow,
#menu3.menu1 .package-box .pack-box h1,
#menu3.menu1 .package-box .scroll .package-detail .package-name span,
#alert-finish .panel,
#menu4sum .btn-refresh .circle-btn span,
.total-number .id-nav .caption {
  text-shadow: rgba(0, 0, 0, 0.3) 5px 5px 5px;
}

.text-shadow-2 {
  text-shadow: rgba(0, 0, 0, 0.3) 3px 3px 3px;
}

* {
  font-family: "dtac";
  cursor: pointer;
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

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,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
fieldset,
form,
label,
legend,
caption,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  font-family: "dtac";
  vertical-align: baseline;
}

table,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  color: #030303;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

body {
  line-height: 1;
}

blockquote,
q {
  quotes: none;
}

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

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

a {
  cursor: pointer;
  text-decoration: none;
}

input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
button,
select {
  cursor: pointer;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  resize: none;
  outline: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

input[type="text"],
input[type="password"],
textarea {
  cursor: text;
}

button {
  cursor: pointer;
  font-family: "dtac";
  border-radius: 4px;
  height: initial;
  padding: 10px;
  font-size: 25px;
  line-height: 30px;
  width: auto;
  min-width: 200px;
  border: 0px;
  height: 65px;
}
button.btn-border {
  color: #12aced;
  border: 14px solid #12aced;
  background: #fff;
}
button.btn-border2 {
  color: #707070;
  border: 1px solid #707070;
  background: #fff;
}
button.btn-pink {
  width: 180px;
  color: #fff;
  font-weight: 600;
  font-family: "dtac";
  border-radius: 4px;
  -ms-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background: #8a057e;
  /* Old Browsers */
  background: -moz-linear-gradient(left, #8a057e 0%, #fc1b79 100%);
  /* FF3.6+ */
  background: -webkit-gradient(
    left top,
    right top,
    color-stop(0%, #8a057e),
    color-stop(100%, #fc1b79)
  );
  /* Chrome, Safari4+ */
  background: -webkit-linear-gradient(left, #8a057e 0%, #fc1b79 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #8a057e 0%, #fc1b79 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #8a057e 0%, #fc1b79 100%);
  /* IE 10+ */
  background: linear-gradient(to right, #8a057e 0%, #fc1b79 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8A057E', endColorstr='#FC1B79', GradientType=1 );
  /* IE6-9 */
}
button.btn-blue {
  width: 180px;
  line-height: 19px;
  color: #fff;
  font-family: "dtac";
  background: #007ad0;
  border-radius: 4px;
  -ms-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
button.btn-gray {
  color: #fff;
  background: #5b5959;
}
button.active {
  background: #12aced;
  color: #fff;
}

.form-control {
  width: 100%;
  height: 100px;
  border: 5px;
  background-color: #f7f7f7;
  font-size: 2em;
  padding: 10px 15px;
}
.form-control.error {
  border: 1px solid red;
}

* {
  box-sizing: border-box;
  -webkit-text-size-adjust: auto;
  -webkit-tap-highlight-color: transparent;
}

body,
html {
  width: 100%;
  height: 100%;
  color: #6a6a6a;
  background: #fff;
  position: relative;
  font-family: "dtac";
  font-size: 22px;
  line-height: 32px;
  box-sizing: border-box;
}

.bg {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

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

.col-12 {
  float: left;
  width: 100%;
  position: relative;
}

.col-3 {
  float: left;
  width: 33.33%;
  position: relative;
}

.col-45 {
  float: left;
  width: 45%;
  position: relative;
}

.col-30 {
  float: left;
  width: 30%;
  position: relative;
}

.col-25 {
  float: left;
  width: 25%;
  position: relative;
}

img {
  width: 100%;
}

.owl-stage-outer {
  overflow: hidden;
}
.owl-stage-outer .owl-stage {
  height: 100%;
}
.owl-stage-outer .owl-stage .owl-item {
  float: left;
}

.btn-back {
  position: absolute;
  bottom: 40px;
  right: 50px;
  width: 60px;
  z-index: 10;
}

.btn-home {
  position: absolute;
  bottom: 40px;
  right: 160px;
  width: 60px;
  z-index: 10;
}

.btn-compare {
  position: absolute;
  bottom: 40px;
  right: 272px;
  width: 58px;
  z-index: 10;
}

#app {
  width: 1024px;
  height: 1366px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  -webkit-text-size-adjust: auto;
  -webkit-font-smoothing: antialiased;
  transform-origin: left top;
}

#logo {
  top: 20px;
  left: 20px;
  width: 140px;
  position: absolute;
  z-index: 10;
  display: none;
}

.wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

#home {
  width: 100%;
  height: 100%;
  position: relative;
}
#home .banner {
  top: 55px;
  width: 790px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
}
#home .banner .item {
  width: 95%;
  height: 1038px;
  margin: 0 auto;
  position: relative;
  max-height: 85%;
  overflow: hidden;
  display: table;
  overflow: initial;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
  background: linear-gradient(to left, #fff, #f7f7f7);
}
#home .banner .item .middle {
  display: table-cell;
  vertical-align: middle;
  padding: 0px 80px;
  text-align: center;
  z-index: 2;
  position: relative;
}
#home .banner .item .middle .name {
  color: #000;
  font-size: 36px;
  line-height: 46px;
  margin-bottom: 60px;
  margin-top: -60px;
}
#home .banner .item .middle .name img {
  width: 30px;
  margin-right: 5px;
}
#home .banner .owl-stage-outer .owl-stage {
  height: initial;
}
#home .banner .owl-stage-outer {
  padding-bottom: 20px;
}
#home .menu {
  float: left;
  top: 50%;
  width: 55%;
  height: 500px;
  position: relative;
  transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
#home .menu .box {
  width: 350px;
  float: left;
  height: 500px;
  background: #fff;
  text-align: right;
  position: relative;
  transition: 0.3s ease 0s;
  transform-origin: center top;
  transform: scale(1);
  -webkit-box-reflect: below 8px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(250, 250, 250, 0.1)));
  box-shadow: rgba(0, 0, 0, 0.15) 1px 5px 15px;
  -moz-box-shadow: rgba(0, 0, 0, 0.15) 1px 5px 15px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.15) 1px 5px 15px;
}
#home .menu .box.at1 {
  z-index: 4;
  -webkit-box-reflect: below 8px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(250, 250, 250, 0.4)));
}
#home .menu .box.at2 {
  z-index: 3;
  margin-top: 4%;
  margin-left: -6%;
  transform: scale(0.85);
}
#home .menu .box.at3 {
  z-index: 2;
  margin-top: 7%;
  margin-left: -12%;
  transform: scale(0.75);
}
#home .menu .box.at4 {
  z-index: 1;
  margin-top: 9.5%;
  margin-left: -18%;
  transform: scale(0.65);
}
#home .menu .box.at4 p {
  line-height: 35px;
}
#home .menu .box:nth-child(1).at3,
#home .menu .box:nth-child(4).at3,
#home .menu .box:nth-child(1).at4 {
  transform-origin: right top;
}
#home .menu .box:nth-child(4).at2,
#home .menu .box:nth-child(3).at2,
#home .menu .box:nth-child(4).at1 {
  transform-origin: left top;
}
#home .menu .box:nth-child(3).at1,
#home .menu .box:nth-child(4).at1 {
  margin-left: -10%;
}
#home .menu .box .bg {
  height: 80%;
  position: relative;
  background-size: contain;
}
#home .menu .box .bg.null {
  background-size: auto 60%;
}
#home .menu .box .bg.null:after {
  content: "";
  z-index: -1;
  background: radial-gradient(circle, #ebebeb, #fff, #fff);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
#home .menu .box .text {
  height: 20%;
  background: #f1f1f1;
  position: relative;
  box-sizing: border-box;
  padding: 3px 15px;
}
#home .menu .box .text h2 {
  font-size: 38px;
  line-height: 50px;
  color: #333;
}

.img-bg {
  z-index: 0;
  background-repeat: no-repeat;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.img-bg .bg {
  display: none;
}
.img-bg .bg.active {
  display: block;
}
.img-bg .coming {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 60px;
  letter-spacing: 5px;
  transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

#smartphone .col-6 {
  padding-top: 0px;
}
#smartphone:before {
  content: "";
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
#smartphone .form-color {
  max-height: 170px;
  overflow-y: auto;
}
#smartphone .number-keyboard {
  left: 0;
  right: 0;
  top: 1460px;
}
#smartphone .form-popup {
  display: none;
  border-radius: 0px;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  padding-top: 0px;
}
#smartphone .form-popup .inner {
  top: 50%;
  left: 50%;
  position: relative;
  transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
#smartphone .sp_middle {
  top: 45%;
  left: 0px;
  width: 100%;
  display: block;
  position: absolute;
  transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
#smartphone .box-brand {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  top: 30px;
  left: 0;
  right: 0;
  height: 250px;
  -webkit-mask-image: radial-gradient(
    circle at center,
    black 0%,
    rgba(0, 0, 0, 0) 100%
  );
}
#smartphone .brand {
  left: 0;
  right: 0;
  width: 150px;
  margin: 0 auto;
  position: absolute;
}
#smartphone .brand .item {
  text-align: center;
  height: 130px;
}
#smartphone .brand .item img {
  width: 105%;
  max-height: 50px;
  position: relative;
  top: 50%;
  transition: 0.3s ease 0s;
  transform-origin: center 110%;
  transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
#smartphone .brand .owl-stage-outer {
  overflow: initial;
}
#smartphone .brand .owl-stage-outer .owl-item {
  opacity: 0.2;
}
#smartphone .brand .owl-stage-outer .owl-item.active {
  opacity: 1;
}
#smartphone .brand .owl-stage-outer .owl-item.active .item img {
  transform: scale(2.2);
  -o-transform: scale(2.2);
  -ms-transform: scale(2.2);
  -moz-transform: scale(2.2);
  -webkit-transform: scale(2.2);
  -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.1)));
}
#smartphone .brand .owl-stage-outer .owl-item.active .item img.long {
  transform-origin: center 175%;
  transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
}
#smartphone .brand .owl-stage-outer .owl-item.active .hot {
  display: block;
}
#smartphone .mobile {
  width: 320px;
  height: 650px;
  position: relative;
  margin: 0 auto;
  left: 0;
  right: 0;
}
#smartphone .mobile .owl-item.active .item .img img {
  height: 360px;
}
#smartphone .mobile .owl-item.active .item .subtext {
  display: block;
}
#smartphone .mobile .owl-item.active .item .hot {
  display: block;
}
#smartphone .mobile .item {
  height: 600px;
  position: relative;
}
#smartphone .mobile .item .img {
  width: 100%;
  height: 65%;
  position: relative;
}
#smartphone .mobile .item .img img {
  width: initial;
  height: 200px;
  top: 50%;
  left: 50%;
  position: absolute;
  transition: 0.3s ease 0s;
  transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
#smartphone .mobile .item .text {
  height: 10%;
  width: 100%;
  position: relative;
  text-align: center;
  display: table;
  opacity: 0;
  margin-top: -20px;
  margin-bottom: 30px;
}
#smartphone .mobile .item .text h2 {
  color: #000;
  font-size: 30px;
  line-height: 34px;
  display: table-cell;
  vertical-align: middle;
}
#smartphone .mobile .item .subtext {
  width: 100%;
  height: 25%;
  padding: 0px 20px;
  text-align: center;
  display: none;
  transition: 0.3s ease 0s;
  margin-top: 10px;
}
#smartphone .mobile .item .subtext p {
  font-size: 18px;
  line-height: 16px;
}
#smartphone .mobile .item .subtext h2 {
  font-size: 30px;
  line-height: 45px;
  margin-bottom: 20px;
  color: #000;
}
#smartphone .mobile .item .subtext button {
  height: 55px;
  background-color: #007ad0;
  border-radius: 6px;
}
#smartphone .mobile .owl-stage-outer {
  overflow: initial;
}
#smartphone .mobile .owl-stage-outer .owl-item {
  opacity: 1;
}
#smartphone .mobile .owl-stage-outer .owl-item.active {
  opacity: 1;
}
#smartphone .mobile .owl-stage-outer .owl-item.active .item img {
  -webkit-box-reflect: below -20% -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(transparent),
      color-stop(70%, transparent),
      to(rgba(250, 250, 250, 0.5))
    );
}
#smartphone .mobile .owl-stage-outer .owl-item.active .item .text {
  opacity: 1;
}
#smartphone .detail {
  width: 100%;
  height: 100%;
  display: inline-block;
  box-sizing: border-box;
  padding: 15px 15px 220px;
}
#smartphone .detail .middle_content {
  display: table;
  padding-top: 0px;
}
#smartphone .detail .middle_content .middle {
  vertical-align: top;
  display: table-cell;
}
#smartphone .detail .name {
  color: #333;
  font-size: 30px;
  text-align: right;
}
#smartphone .detail .spec {
  width: 100%;
  position: relative;
  font-size: 16px;
  line-height: 32px;
  max-height: 350px;
  overflow: auto;
}
#smartphone .detail .spec.Apple {
  margin-top: 0px;
}
#smartphone .detail .spec.Apple .in:nth-child(1) img {
  width: 48px;
  left: 8px;
}
#smartphone .detail .spec .in {
  width: 100%;
  position: relative;
  padding-left: 60px;
  display: table;
  box-sizing: border-box;
  min-height: 45px;
  margin-bottom: 5px;
}
#smartphone .detail .spec .in:nth-child(2) img,
#smartphone .detail .spec .in:nth-child(3) img {
  left: 0px;
  height: 55px;
}
#smartphone .detail .spec .in img {
  top: -5px;
  left: 0px;
  height: 50px;
  width: initial;
  position: absolute;
}
#smartphone .detail .spec .in .text {
  display: table-cell;
  vertical-align: middle;
  min-height: 78px;
}
#smartphone .detail .spec-icon {
  width: 80%;
  display: inline-block;
  margin-top: 70px;
  display: none;
}
#smartphone .detail .spec-icon img {
  float: left;
  height: 70px;
  width: initial;
  margin-right: 20px;
}
#smartphone .detail .mobile-color .item {
  height: 350px;
}
#smartphone .detail .mobile-color .item img {
  width: initial;
  height: 100%;
}
#smartphone .detail .mobile-color .owl-stage {
  height: initial;
}
#smartphone .detail .mobile-color-bullet {
  display: inline-block;
  margin-top: 30px;
}
#smartphone .detail .mobile-color-bullet .item {
  float: left;
  margin: 4px;
  display: inline-block;
  position: relative;
  padding-top: 35px;
  text-align: center;
  min-width: 65px;
  display: none;
}
#smartphone .detail .mobile-color-bullet .item.active {
  display: block;
}
#smartphone .detail .mobile-color-bullet .item.active span {
  box-shadow: 0px 0px 0px 3px #fff;
}
#smartphone .detail .mobile-color-bullet .item.active p {
  font-weight: bold;
}
#smartphone .detail .mobile-color-bullet .item span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 0;
  box-shadow: 1px 1px 5px #fff;
}
#smartphone .detail .mobile-color-bullet .item p {
  width: 100%;
  position: relative;
  font-size: 15px;
  line-height: 16px;
  color: #333;
}
#smartphone .detail .color {
  margin-top: 30px;
}
#smartphone .detail .price {
  width: 60%;
  text-align: center;
  font-size: 19px;
  line-height: 28px;
  margin: 120px auto 50px;
  min-height: 390px;
}
#smartphone .detail .price .box {
  padding: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
}
#smartphone .detail .price .box .number {
  color: #000;
  font-size: 32px;
  line-height: 40px;
  margin-top: 10px;
}
#smartphone .detail .price .box:last-child {
  border: 0px;
}
#smartphone .detail .price-normal {
  font-size: 14px;
  margin-top: 0px;
}
#smartphone .detail .price-normal big {
  font-size: 28px;
  margin-left: 10px;
}
#smartphone .detail .price-special {
  position: relative;
}
#smartphone .detail .price-special .form-control {
  height: 70px;
}
#smartphone .detail .price-special .btn {
  text-align: center;
  margin-top: 10px;
  width: 100%;
}
#smartphone .detail .price-special .heading {
  font-size: 20px;
  color: #019ddf;
}
#smartphone .detail .price-special .forSMS {
  width: 100%;
  margin-top: 0px;
}
#smartphone .detail .price-special .forSMS .form {
  padding: 10px 15px 20px;
  margin-top: -45px;
  min-height: 220px;
}
#smartphone .detail .price-special .scroll {
  width: 100%;
  margin-top: 10px;
  height: 325px;
  margin-left: -5px;
}
#smartphone .detail .price-special .scroll .in {
  position: relative;
}
#smartphone .detail .price-special .scroll .owl-loaded .owl-prev {
  top: 48%;
  left: -52px;
}
#smartphone .detail .price-special .scroll .owl-loaded .owl-next {
  top: 48%;
  right: -52px;
}
#smartphone .detail .price-special .box {
  text-align: center;
  background: #fff;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
  font-size: 15px;
  line-height: 25px;
  margin: 10px 7px 30px 7px;
  position: relative;
}
#smartphone .detail .price-special .box .p-price {
  font-size: 24px;
  color: #019ddf;
  padding: 15px 15px 0px;
}
#smartphone .detail .price-special .box .p-detail {
  text-align: center;
  padding: 5px 20px 5px;
}
#smartphone .detail .price-special .box .p-footer {
  background: #fed500;
  color: #000;
  padding: 0px 0px 25px;
  overflow-y: auto;
  height: 105px;
  font-size: 12px;
  line-height: 20px;
}
#smartphone .detail .price-special .box .p-footer .inner {
  height: 100%;
  white-space: pre-line;
  padding: 20px;
  overflow-y: auto;
  padding-bottom: 0px;
}
#smartphone .detail .price-special .box .btn-buy {
  position: absolute;
  bottom: -22px;
  font-size: 20px;
  line-height: 22px;
  letter-spacing: 1px;
  height: 42px;
  min-width: 220px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
#smartphone .promotion {
  width: 100%;
  margin-top: 150px;
  display: inline-block;
}
#smartphone .promotion .owl-stage-outer {
  text-align: center;
  overflow: initial;
}
#smartphone .promotion .owl-stage-outer .owl-stage {
  height: initial;
  display: inline-block;
}
#smartphone .promotion .item.spacial .price {
  color: #0f9fdf;
}
#smartphone .promotion .item .type {
  color: #000;
  text-align: center;
  min-height: 78px;
  padding: 0px 20px;
  box-sizing: border-box;
  display: table;
  width: 100%;
}
#smartphone .promotion .item .type h2 {
  width: 100%;
  text-align: center;
  display: table-cell;
  vertical-align: bottom;
  line-height: 40px;
}
#smartphone .promotion .item .price {
  text-align: center;
  font-size: 38px;
  line-height: 45px;
  margin: 10px 0px 20px;
  color: #000;
}
#smartphone .promotion .item .content {
  background: #fff;
  padding: 40px;
  box-sizing: border-box;
  font-size: 20px;
  line-height: 35px;
  min-height: 496px;
  text-align: left;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
}
#smartphone .promotion .item .content .in {
  margin-bottom: 35px;
}
#smartphone .promotion .item .content .in big {
  color: #000;
  font-size: 110%;
}
#smartphone .promotion .item .content .in b {
  color: #000;
}
#smartphone .promotion .item .content .middle {
  width: 100%;
  height: 410px;
  display: table;
  text-align: center;
  color: #000;
  font-size: 24px;
}
#smartphone .promotion .item .content .middle p {
  display: table-cell;
  vertical-align: middle;
}
#smartphone .spec-vdo {
  width: 100%;
  position: relative;
  margin-left: 0px;
  margin-top: 0px;
  padding-left: 15px;
}
#smartphone .spec-vdo video {
  width: 65%;
  position: relative;
}

#reward {
  background: #fff;
}
#reward .reward-logo {
  padding: 25px 15px;
}
#reward .reward-logo img {
  width: 300px;
}
#reward .iframe {
  top: 8%;
  left: 0;
  right: 0;
  width: 80%;
  position: absolute;
  margin: 0 auto;
  height: 85%;
  z-index: 10;
}
#reward .iframe iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  padding: 20px;
  padding-top: 60px;
  background: #fff;
}
#reward .iframe:after {
  content: "";
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 100px;
  background: #fff;
  position: absolute;
}
#reward .detail {
  background-color: #fafbff;
  width: 100%;
  height: 100%;
  padding: 20px 40px;
}
#reward .box {
  margin-bottom: 30px;
  background-color: #fff;
  border-radius: 20px;
  padding: 30px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
}

.col-6 {
  float: left;
  width: 50%;
  box-sizing: border-box;
  position: relative;
  padding-top: 40px;
}

#compare:before {
  content: "";
  background: rgba(255, 255, 255, 0.75);
  z-index: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
#compare .after-head {
  color: #fff;
}
#compare .form .btn {
  margin-top: 20px;
}
#compare .control {
  position: relative;
  width: 100%;
  height: 84%;
  display: inline-block;
  box-sizing: border-box;
}
#compare .control .col-6 {
  height: 50%;
  width: 100%;
  padding-top: 0;
}
#compare .control .col-6:first-child .box-compare {
  border-bottom: 2px solid #d6d6d6;
}
#compare .control .col-6:first-child .keyboard-overlay {
  top: -180px;
  height: calc(100% + 178px);
}
#compare .control .col-6:first-child .keyboard-overlay.blue {
  background: rgba(1, 157, 223, 0.9);
}
#compare .control .col-6:last-child .keyboard-overlay {
  top: initial;
  bottom: -400px;
  height: calc(100% + 400px);
}
#compare .control .col-6:last-child .keyboard-overlay.blue {
  background: rgba(1, 157, 223, 0.9);
}
#compare .control .col-6:last-child .price-buy {
  top: 42%;
}
#compare .control .col-6:last-child .number-keyboard {
  top: 450px;
}
#compare .control .col-6:last-child .form-popup.popup-step {
  top: 55%;
}
#compare .control .col-6 .box-compare {
  width: 88%;
  height: 100%;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}
#compare .box-brand {
  bottom: 0px;
  position: absolute;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  left: 0;
  right: 0;
  height: 180px;
}
#compare .brand {
  left: 0;
  right: 0;
  width: 150px;
  bottom: 40px;
  margin: 0 auto;
  position: absolute;
}
#compare .brand .item {
  text-align: center;
  height: 150px;
}
#compare .brand .item img {
  width: 100%;
  max-height: 30px;
  position: relative;
  top: 50%;
  transition: 0.3s ease 0s;
  transform-origin: center 110%;
  transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
#compare .brand .item img.long {
  transform-origin: center 330%;
}
#compare .brand .owl-stage-outer {
  overflow: initial;
}
#compare .brand .owl-stage-outer .owl-item {
  opacity: 0.2;
}
#compare .brand .owl-stage-outer .owl-item.active {
  opacity: 1;
}
#compare .brand .owl-stage-outer .owl-item.active .item img {
  transform: scale(2.2);
  -o-transform: scale(2.2);
  -ms-transform: scale(2.2);
  -moz-transform: scale(2.2);
  -webkit-transform: scale(2.2);
  -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.1)));
}
#compare .brand .owl-stage-outer .owl-item.active .item img.long {
  transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
}
#compare .mobile {
  top: 10%;
  width: 100%;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
}
#compare .mobile .item {
  height: 320px;
  position: relative;
}
#compare .mobile .item .img {
  width: 100%;
  height: 80%;
  position: relative;
}
#compare .mobile .item .img img {
  width: initial;
  height: 80%;
  top: 50%;
  left: 50%;
  position: absolute;
  transition: 0.3s ease 0s;
  transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
#compare .mobile .item .text {
  height: 20%;
  width: 100%;
  position: relative;
  text-align: center;
  display: table;
}
#compare .mobile .item .text h2 {
  color: #333;
  font-size: 22px;
  line-height: 30px;
  display: table-cell;
  vertical-align: middle;
}
#compare .mobile .owl-stage-outer {
  overflow: initial;
}
#compare .mobile .owl-stage-outer .owl-stage {
  height: initial;
}
#compare .spec {
  float: right;
  width: 60%;
  position: relative;
  font-size: 16px;
  line-height: 22px;
  min-height: 350px;
  margin-top: -85px;
}
#compare .spec.Apple .in:nth-child(1) img {
  width: 45px;
  left: 5px;
  top: -1px;
}
#compare .spec .in {
  width: 100%;
  position: relative;
  padding-left: 60px;
  display: table;
  box-sizing: border-box;
  padding-right: 30px;
  min-height: 55px;
  margin-bottom: 0px;
}
#compare .spec .in:nth-child(2) img,
#compare .spec .in:nth-child(3) img {
  left: 2px;
  height: 52px;
}
#compare .spec .in img {
  top: 0px;
  left: 0px;
  height: 57px;
  width: initial;
  position: absolute;
}
#compare .spec .in .text {
  display: table-cell;
  vertical-align: middle;
}
#compare .spec-icon {
  width: 80%;
  display: inline-block;
  margin-top: 70px;
}
#compare .spec-icon img {
  float: left;
  height: 70px;
  width: initial;
  margin-right: 20px;
}
#compare .model {
  float: left;
  width: 40%;
  height: 100%;
  text-align: center;
  position: relative;
}
#compare .model img {
  width: initial;
  height: 250px;
  margin: 0px 0px 5px;
}
#compare .model .name {
  font-size: 20px;
  line-height: 32px;
  margin-bottom: 0px;
  margin-top: -80px;
  height: 65px;
  color: #000;
}
#compare .model .price {
  font-size: 18px;
  line-height: 40px;
  position: absolute;
  bottom: 85px;
  width: 100%;
}
#compare .model .price big {
  color: #000;
  font-size: 26px;
  margin-left: 10px;
}
#compare .model .under-price {
  display: inline-block;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  text-align: center;
}
#compare .model .under-price .btn-price {
  width: 200px;
  height: 42px;
  margin-top: 15px;
  background: #12aced;
  z-index: 10;
  position: relative;
  font-size: 16px;
}
#compare .model .under-price .btn-vdo {
  position: relative;
  width: 51px !important;
  left: inherit;
  top: -15px;
  height: auto !important;
}
#compare .model .under-price.active .btn-price {
  display: none;
}
#compare .popup {
  top: 7%;
  width: 100%;
  height: 85%;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding-top: 40px;
  display: none;
}
#compare .price-vdo {
  width: 55%;
  display: inline-block;
  margin-top: 12px;
  text-align: left;
  position: absolute;
  bottom: 0px;
}
#compare .price-vdo video {
  height: 270px;
}
#compare .price-buy {
  display: none;
  position: absolute;
  width: 80%;
  padding: 0px;
  margin: 0px auto;
  left: 0px;
  right: 0px;
  top: 28%;
  z-index: 1000;
  transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
#compare .price-buy .price-normal {
  color: #fff;
  font-size: 12px;
  display: inline-block;
  line-height: 15px;
}
#compare .price-buy .price-normal big {
  font-size: 22px;
  margin-left: 10px;
}
#compare .price-buy .price-special .form-control {
  height: 70px;
}
#compare .price-buy .price-special .heading {
  font-size: 17px;
  color: #fff;
}
#compare .price-buy .price-special .scroll {
  width: 100%;
  height: 258px;
  overflow-x: auto;
  margin-top: 10px;
  padding: 0px 0px 10px;
}
#compare .price-buy .price-special .scroll .in {
  width: auto;
  display: inline-flex;
}
#compare .price-buy .price-special .box {
  float: left;
  width: 372px;
  text-align: center;
  background: #fff;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
  font-size: 12px;
  line-height: 20px;
  margin: 0px 15px 0px 0px;
  display: inline-block;
  position: relative;
}
#compare .price-buy .price-special .box:last-child {
  margin-right: 0px;
}
#compare .price-buy .price-special .box .p-price {
  font-size: 30px;
  color: #019ddf;
  padding: 20px 20px 0px;
}
#compare .price-buy .price-special .box .p-detail {
  text-align: center;
  padding: 15px 20px 8px;
}
#compare .price-buy .price-special .box .p-footer {
  background: #fed500;
  color: #000;
  padding: 0px 0px 30px;
  line-height: 18px;
  height: 110px;
  font-size: 11px;
  overflow-y: auto;
}
#compare .price-buy .price-special .box .p-footer .inner {
  white-space: pre-line;
  padding: 15px 20px;
  overflow-y: auto;
  height: 100%;
  padding-bottom: 0px;
}
#compare .price-buy .price-special .box .btn-buy {
  position: absolute;
  bottom: -20px;
  font-size: 18px;
  line-height: 16px;
  letter-spacing: 1px;
  height: 38px;
  min-width: 220px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
#compare .forSMS {
  width: 100%;
  margin-top: 0px;
}
#compare .forSMS .form {
  position: relative;
}
#compare .forSMS .form .overlay-form {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}
#compare .number-keyboard {
  right: 0;
  left: 0;
  top: 350px;
  zoom: 0.8;
}
#compare .form-popup.popup-step {
  top: 16%;
  left: 0px;
  width: 100%;
  font-size: 25px;
  display: none;
  position: absolute;
  border-radius: 0px;
  line-height: 40px;
  height: auto;
  background: transparent;
  box-shadow: none;
  padding: 0px;
}
#compare .form-popup.popup-step .icon-correct,
#compare .form-popup.popup-step .icon-wrong {
  width: 90px;
  height: 90px;
}
#compare .gb-btn {
  top: 0px;
  position: relative;
}
#compare .gb-btn .in {
  font-size: 14px;
  padding: 3px 20px;
  line-height: 26px;
  border-radius: 4px;
  color: #fff;
  border: 1px solid #fff;
}
#compare .gb-btn .in.active {
  color: #000;
  background: #fff;
}

.close {
  bottom: 0px;
  right: 0px;
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  padding: 10px;
  background: #8a057e;
  /* Old Browsers */
  background: -moz-linear-gradient(left, #8a057e 0%, #fc1b79 100%);
  /* FF3.6+ */
  background: -webkit-gradient(
    left top,
    right top,
    color-stop(0%, #8a057e),
    color-stop(100%, #fc1b79)
  );
  /* Chrome, Safari4+ */
  background: -webkit-linear-gradient(left, #8a057e 0%, #fc1b79 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #8a057e 0%, #fc1b79 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #8a057e 0%, #fc1b79 100%);
  /* IE 10+ */
  background: linear-gradient(to right, #8a057e 0%, #fc1b79 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8a057e', endColorstr='#fc1b79', GradientType=1 );
  /* IE6-9 */
  zoom: 1.2;
  z-index: 10;
}
.close:before {
  content: "";
  top: 50%;
  left: 50%;
  width: 28px;
  height: 2px;
  margin-left: -14px;
  margin-top: -1px;
  background: #fff;
  position: absolute;
  transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.close:after {
  content: "";
  top: 50%;
  left: 50%;
  width: 28px;
  height: 2px;
  margin-left: -14px;
  margin-top: -1px;
  background: #fff;
  position: absolute;
  transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

#zodiac,
#zodiac2,
#nice-number {
  background: #fafbff;
}
#zodiac .img-bg:after,
#zodiac2 .img-bg:after,
#nice-number .img-bg:after {
  content: "";
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
#zodiac .img-bg .bg,
#zodiac2 .img-bg .bg,
#nice-number .img-bg .bg {
  background-position-y: -180px;
}
#zodiac .detail,
#zodiac2 .detail,
#nice-number .detail {
  width: 100%;
  height: 100%;
  display: inline-block;
}
#zodiac .detail .left,
#zodiac2 .detail .left,
#nice-number .detail .left {
  width: 100%;
  float: left;
  height: 100%;
  position: relative;
}
#zodiac .detail .left .iframe,
#zodiac2 .detail .left .iframe,
#nice-number .detail .left .iframe {
  top: -30px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 625px;
  height: calc(100% + 0px);
  position: absolute;
  transition: none;
  transform: scale(0.9);
  -o-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -webkit-transform: scale(0.9);
  overflow: hidden;
}
#zodiac .detail .left .iframe.active,
#zodiac2 .detail .left .iframe.active,
#nice-number .detail .left .iframe.active {
  z-index: 10;
  opacity: 1;
}
#zodiac .detail .left .iframe iframe,
#zodiac2 .detail .left .iframe iframe,
#nice-number .detail .left .iframe iframe {
  width: 100%;
  height: 100%;
}
#zodiac .detail .left .overlay,
#zodiac2 .detail .left .overlay,
#nice-number .detail .left .overlay {
  width: 52%;
  height: 84.5%;
  position: absolute;
  left: 20%;
  top: 5%;
  transition: 0.3s ease 0s;
  z-index: 30;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  text-align: center;
  padding-top: 39%;
  font-size: 30px;
  letter-spacing: 1px;
  display: none;
}

#promotion {
  background: #fafbff;
  width: 100%;
  overflow: auto;
}
#promotion .step2 {
  display: none;
}
#promotion .step2 .inner {
  width: 700px;
  height: 560px;
  margin: 0 auto;
  display: inline-block;
  position: absolute;
  left: 0;
  right: 0;
}
#promotion .step2 .current {
  position: relative;
  margin: 0 auto;
  height: 689px;
  overflow: hidden;
  text-align: center;
}
#promotion .step2 .current img {
  max-height: 100%;
  max-width: 100%;
  width: initial;
  margin: 0 auto;
  top: 50%;
  position: relative;
  transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
#promotion .step2 .slide_list {
  width: 100%;
  margin: 20px 0px;
  padding: 0px 10px;
}
#promotion .step2 .slide_list .owl-stage-outer {
  text-align: center;
}
#promotion .step2 .slide_list .owl-stage-outer .owl-stage {
  overflow: hidden;
  margin: 0 auto;
}
#promotion .step2 .slide_list .item {
  border: 2px solid #fff;
}
#promotion .step2 .slide_list .item.active {
  box-sizing: border-box;
  border-color: #fc1b79;
  border-radius: 4px;
  -ms-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
#promotion .step2 .slide_btn {
  text-align: center;
  padding: 30px 15px;
  background-color: #e8e8e8;
}
#promotion .step2 .slide_btn button {
  margin: 0px 6px;
  height: 54px;
  width: 180px;
  font-size: 19px;
  line-height: 19px;
  font-weight: 600;
  border-radius: 5px;
  background-color: #fafbff;
  box-shadow: none;
}
#promotion .step2 .form {
  padding: 40px;
}
#promotion .step2 .form .input {
  margin: 40px 0;
}
#promotion .step2 .form .box {
  width: 100%;
  margin: 0 auto;
}
#promotion .step2 .form .hr {
  width: 100%;
  height: 1px;
  background-color: #e8e8e8;
}
#promotion .step2 .email,
#promotion .step2 .sms {
  width: 100%;
  top: 50%;
  position: absolute;
  display: none;
  z-index: 51;
  transform: translateY(-50%);
}
#promotion .step2 .email .form-control,
#promotion .step2 .sms .form-control {
  margin-top: 30px;
  height: 85px;
}
#promotion .img-bg:after {
  content: "";
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
#promotion .img-bg .bg {
  background-position-y: -180px;
}
#promotion .menu {
  display: block;
  padding: 0 40px;
  border-bottom: 1px solid #e8e8e8;
  padding: 25px 0;
  text-align: center;
}
#promotion .menu .box {
  width: auto;
  display: inline-block;
  text-align: center;
  font-weight: bold;
  padding: 35px 20px;
  margin: 0 22px;
  font-size: 25px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  border-radius: 5px;
  background-color: #fff;
}
#promotion .menu .box.active {
  color: #fff;
  background-color: #00a5e5 !important;
}
#promotion .menu .box.active span {
  position: relative;
}
#promotion .menu .box.active span:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 6px;
  background-color: #00a5e5;
  border-radius: 3px;
  font-size: 30px;
}
#promotion .menu .box .bg {
  height: 220px;
  position: relative;
  background-size: 65%;
  margin-top: 50px;
}
#promotion .menu .box .bg.null {
  background-size: auto 60%;
}
#promotion .menu .box .bg.null:after {
  content: "";
  z-index: -1;
  background: radial-gradient(circle, #ebebeb, #fff, #fff);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
#promotion .menu .box .text {
  text-align: center;
  position: relative;
  box-sizing: border-box;
  padding: 3px 15px;
  display: none;
}
#promotion .menu .box .text h2 {
  font-size: 30px;
  line-height: 50px;
  color: #2dbdfa;
  font-weight: bold;
  letter-spacing: 1px;
}
#promotion .menu .box .text button {
  background: #fed500;
  font-size: 20px;
  line-height: 22px;
  margin: 40px 0px 30px;
}
#promotion .menu.nice-n {
  padding: 25px 15px;
  overflow: auto;
  width: 100%;
}
#promotion .menu.nice-n .box {
  width: auto;
  padding: 35px 13px;
  margin: 0 7px;
}
#promotion .menu.nice-n > div {
  width: 100%;
}
#promotion .menu.nice-n span.active {
  position: absolute;
}
#promotion .menu.support-n .box {
  width: 28.7%;
}
#promotion .detail {
  width: 100%;
  height: 100%;
  display: inline-block;
}
#promotion .detail .left {
  width: 100%;
  float: left;
  height: 100%;
  position: relative;
  overflow: hidden;
}
#promotion .detail .left .iframe {
  width: 100%;
}
#promotion .detail .left .iframe.active {
  z-index: 10;
  opacity: 1;
}
#promotion .detail .left .iframe iframe {
  width: 100%;
  height: 100%;
}
#promotion .detail .left .overlay {
  width: 52%;
  height: 84.5%;
  position: absolute;
  left: 20%;
  top: 5%;
  transition: 0.3s ease 0s;
  z-index: 30;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  text-align: center;
  padding-top: 39%;
  font-size: 30px;
  letter-spacing: 1px;
  display: none;
}
#promotion .detail .right .menu .box {
  display: inline-block;
}
#promotion .number-keyboard {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#promotion .form h2 {
  font-weight: 600;
}
#promotion .form .btn button {
  font-size: 20px;
  line-height: 19px;
  font-weight: 600;
  box-shadow: none;
  border-radius: 5px;
}
#promotion .email-success,
#promotion .sms-success {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 5000;
  position: absolute;
  background: rgba(105, 105, 105, 0.8);
  display: none;
}
#promotion .email-success p,
#promotion .sms-success p {
  top: 48%;
  margin: 0px;
  color: #fff;
  font-size: 32px;
  line-height: 68px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 1px;
  position: relative;
  transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
#promotion button {
  cursor: pointer;
}

#vdo {
  z-index: 100;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
#vdo video {
  height: 100%;
  left: 50%;
  top: 50%;
  position: relative;
  transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
#vdo .line {
  left: 0%;
  height: 10px;
  position: absolute;
  z-index: 2;
  bottom: 160px;
  opacity: 0;
  color: #000;
  font-size: 42px;
  animation: slideInLeft 8s infinite;
}

.icon {
  bottom: 130px;
  right: 110px;
  text-align: center;
  position: absolute;
}
.icon .img {
  width: 120px;
  height: 120px;
  position: relative;
  text-align: center;
  margin: 0 auto;
}
.icon .img:after {
  content: "";
  z-index: 2;
  border-radius: 50%;
  background: #7a7a7a;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  animation: ScaleBotton 3s infinite;
}
.icon .img:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0%;
  top: 0%;
  z-index: 0;
  border-radius: 50%;
  background: rgba(122, 122, 122, 0.5);
  animation: ShadowBox 3s infinite;
}
.icon .img img {
  width: 45%;
  margin-top: 25%;
  z-index: 3;
  position: relative;
}
.icon.small {
  zoom: 0.8;
}
.icon.noAni .img:before {
  z-index: 1;
  transform: scale(1);
  -webkit-animation: none;
  animation: none;
}
.icon.noAni .img:after {
  transform: scale(0.75);
  background: #949494;
  -webkit-animation: none;
  animation: none;
}
.icon.centerScreen {
  bottom: 50%;
  margin-bottom: -80px;
}
.icon.centerBottomScreen {
  right: 50%;
  margin-right: -60px;
  bottom: 52px;
  display: none;
}
.icon .text {
  position: relative;
  font-size: 25px;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.icon .text.black {
  color: #949494;
}
.icon .text.font-big {
  font-size: 32px;
}
.icon.slide:after {
  -webkit-animation: none;
  animation: none;
}
.icon.slide:before {
  width: 140%;
  height: 140%;
  background: #9da1a5;
  left: -20%;
  top: -20%;
  -webkit-animation: none;
  animation: none;
}
.icon.slide .bullet {
  width: 80%;
  margin: 0 auto;
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  z-index: 5;
  overflow: hidden;
  padding-left: 14px;
  display: none;
}
.icon.slide .bullet .item {
  width: 15px;
  height: 15px;
  background: #ffff;
}
.icon.slide .img img {
  margin-top: 0px;
  position: absolute;
  -webkit-animation: none;
  animation: none;
}
.icon.slide .img img:nth-child(1) {
  top: 42px;
  left: 25px;
  width: 20px;
  transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}
.icon.slide .img img:nth-child(2) {
  top: 42px;
  right: 25px;
  width: 20px;
}
.icon.slide .img img:nth-child(3) {
  width: 35px;
  top: 42px;
  left: 65px;
  z-index: 6;
  animation: slideMe 3s infinite;
}

.menu-title {
  top: 100px;
  color: #000;
  right: 250px;
  width: 780px;
  font-size: 42px;
  position: absolute;
  text-align: center;
  letter-spacing: 0px;
}

.menu-home {
  width: 100%;
  position: absolute;
  bottom: 0;
  margin-top: 0;
  padding: 0 25px;
  left: 0;
}
.menu-home .box {
  float: left;
  width: 16.66%;
  display: inline-block;
  position: relative;
  padding: 17px 10px;
  box-sizing: border-box;
  margin-bottom: 0px;
}
.menu-home .box .img-active {
  display: none;
}
.menu-home .box .text {
  color: #5d5d5d;
  text-align: center;
  margin-top: 10px;
}
.menu-home .box .text h2 {
  font-size: 30px;
  line-height: 36px;
  color: #555;
}
.menu-home .box .text p {
  line-height: 36px;
  font-size: 18px;
}
.menu-home .box .text h3 {
  font-size: 25px;
  line-height: 40px;
  color: #555;
  font-weight: bold;
}

#shortcut {
  bottom: 0;
  left: 0px;
  position: absolute;
  z-index: 50;
  width: 100%;
  background-color: #fff;
  padding: 15px 40px;
}
#shortcut .inner {
  text-align: center;
  float: left;
  opacity: 1;
  width: 20%;
}
#shortcut .inner .wrapper {
  min-width: 140px;
  height: 100%;
  margin: auto;
  padding: 15px 0px 5px 0px;
  border-radius: 5px;
}
#shortcut .inner.full-width {
  width: 100%;
  margin-left: -2px;
  position: relative;
}
#shortcut .inner.full-width .img {
  border: 0px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  padding: 22px;
  background: #000;
  margin: 30px auto 0px;
  display: none;
}
#shortcut .inner.full-width .img img {
  width: 100%;
  height: initial;
  top: initial;
  margin-top: initial;
}
#shortcut .inner .img {
  border-radius: 4px;
  text-align: center;
}
#shortcut .inner .img img {
  width: auto;
  height: 45px;
  margin: auto;
}
#shortcut .inner .text {
  text-align: center;
  font-size: 18px;
  line-height: 42px;
  font-weight: bold;
}
#shortcut .inner .img-active {
  display: none;
}
#shortcut .inner.active {
  opacity: 1;
}
#shortcut .inner.active .wrapper {
  background-color: #00a5e5;
}
#shortcut .inner.active .text {
  color: #fff;
}
#shortcut .inner.active img {
  display: none;
}
#shortcut .inner.active img.img-active {
  display: block;
}

.arrow-holder {
  position: absolute;
  height: 50px;
  width: auto;
  z-index: 200;
}
.arrow-holder.arr-right {
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: none;
}
.arrow-holder.arr-left {
  top: 50%;
  left: 40px;
  transform: translateY(-50%);
  display: none;
}
.arrow-holder .arrow {
  float: left;
  margin-right: 25px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
.arrow-holder .arrow-right {
  border-left: 30px solid white;
}
.arrow-holder .arrow-left {
  border-right: 30px solid white;
}
@-webkit-keyframes flash {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.arrow-holder #arrow1 {
  -webkit-animation: flash 2.5s infinite;
}
.arrow-holder #arrow2 {
  -webkit-animation: flash 2.5s infinite 0.5s;
}
.arrow-holder #arrow3 {
  -webkit-animation: flash 2.5s infinite 1s;
}
.arrow-holder #arrow4 {
  -webkit-animation: flash 2.5s infinite 1.5s;
}
.arrow-holder #arrow5 {
  -webkit-animation: flash 2.5s infinite 2s;
}

#vdo2 {
  display: none;
}

.iframe-bg {
  top: 0px;
  left: 0px;
  z-index: 2;
  width: 100%;
  height: 410px;
  background: #fff;
  position: absolute;
}

.iframe-banner {
  position: absolute;
  top: 32px;
  left: 193px;
  z-index: 100;
  height: 379px;
  overflow: hidden;
  width: 1130px;
}
.iframe-banner .item {
  width: 100%;
  height: 100%;
}
.iframe-banner .item img {
  width: 100%;
}
.iframe-banner .owl-dots {
  left: 0;
  right: 0;
  text-align: center;
  position: absolute;
  bottom: 15px;
  margin: 0 auto;
}
.iframe-banner .owl-dots .owl-dot {
  margin: 0px 5px;
  width: 15px;
  height: 15px;
  border: 1px solid #fff;
  border-radius: 50%;
  display: inline-block;
}
.iframe-banner .owl-dots .owl-dot.active {
  background: #fff;
}

.keyboard-overlay {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  z-index: 900;
  display: none;
}
.keyboard-overlay .keyboard-panel {
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 50%;
  position: absolute;
  background: #0c486c;
}

.number-keyboard,
.email-keyboard {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 290px;
  height: 290px;
  padding: 20px;
  margin: auto;
  overflow: hidden;
  z-index: 1000;
  background: black;
  display: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px 7px 12px;
  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px 7px 12px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px 7px 12px;
}
.number-keyboard.detail-key,
.email-keyboard.detail-key {
  bottom: 190px;
}
.number-keyboard .wrap,
.email-keyboard .wrap {
  width: 100%;
  height: 100%;
  position: relative;
}
.number-keyboard .row,
.email-keyboard .row {
  width: 100%;
  height: 25%;
  overflow: hidden;
  position: relative;
}
.number-keyboard .box,
.email-keyboard .box {
  color: white;
  float: left;
  width: 33.33%;
  height: 100%;
  font-size: 29px;
  line-height: 65px;
  position: relative;
  text-align: center;
}

.email-keyboard {
  width: 665px;
}
.email-keyboard .row {
  height: 50px;
}
.email-keyboard .row:last-child {
  height: 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.email-keyboard .row:last-child .box {
  width: 50%;
  font-size: 24px;
  line-height: 50px;
  border-top: 0px;
  border-bottom: 0px;
  border: 4px solid #000;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  -ms-border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}
.email-keyboard .box {
  width: 10%;
  text-transform: uppercase;
  font-size: 28px;
  line-height: 42px;
}

.after {
  display: none;
}

.before {
  display: block;
}

.form-popup {
  top: 119px;
  left: 0;
  right: 0;
  width: 92%;
  margin: 0 auto;
  height: 380px;
  position: absolute;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 29px;
  padding-top: 16%;
  box-sizing: border-box;
  font-weight: 500;
  background: rgba(19, 81, 116, 0.95);
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 2005;
  border-radius: 18px;
  -ms-border-radius: 18px;
  -moz-border-radius: 18px;
  -webkit-border-radius: 18px;
  animation-name: fadeIn;
  animation-duration: 0.5s;
  display: none;
}
.form-popup.blue {
  background: rgba(1, 157, 223, 0.9);
}
.form-popup.popup-step {
  left: 0px;
  top: -340px;
  height: 620px;
  padding-top: 20%;
  width: 100%;
  font-size: 25px;
  background: rgba(92, 89, 89, 0.9);
}
.form-popup.popup-step.blue {
  background: rgba(1, 157, 223, 0.9);
}
.form-popup .icon-correct {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border-radius: 50%;
  margin-bottom: 20px;
  position: relative;
  border: 3px solid #fff;
  background: #fff;
  display: none;
}
.form-popup .icon-correct:after {
  content: "";
  top: 50%;
  left: 28%;
  width: 58%;
  height: 8px;
  border-radius: 8px;
  position: absolute;
  background: #22a5e2;
  transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.form-popup .icon-correct:before {
  content: "";
  top: 62%;
  left: 19%;
  width: 25px;
  height: 8px;
  border-radius: 8px;
  position: absolute;
  background: #22a5e2;
  transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.form-popup .icon-wrong {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border-radius: 50%;
  margin-bottom: 20px;
  position: relative;
  border: 3px solid #fc1b79;
  background: #fc1b79;
  display: none;
}
.form-popup .icon-wrong:after {
  content: "";
  top: 45%;
  left: 15%;
  width: 70%;
  height: 8px;
  border-radius: 8px;
  position: absolute;
  background: #fff;
  transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.form-popup .icon-wrong:before {
  content: "";
  top: 45%;
  left: 15%;
  width: 70%;
  height: 8px;
  border-radius: 8px;
  position: absolute;
  background: #fff;
  transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.form {
  width: 80%;
  margin: 0 auto;
  min-height: 250px;
  padding: 20px 40px;
  background: #fff;
  border-radius: 20px;
  box-sizing: border-box;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
  margin-top: 20px;
  max-width: 100%;
}
.form .mask {
  font-size: 14px;
  line-height: 18px;
  margin-top: 10px;
  margin-bottom: 22px;
  width: 100%;
  text-align: center;
}
.form h2 {
  font-size: 26px;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 15px;
}
.form .input {
  width: 100%;
  height: 58px;
  margin: 0 auto;
  margin-top: 14px;
  margin-bottom: 30px;
  border-radius: 4px;
  background: #ddd;
  font-size: 30px;
  line-height: 50px;
  border: 3px solid #ddd;
  position: relative;
  z-index: 1000;
  box-sizing: border-box;
  text-align: center;
  overflow-x: auto;
}
.form .input.error {
  border-color: red;
}
.form .btn {
  text-align: center;
  margin-top: 40px;
}
.form .btn button {
  width: 175px;
  min-width: initial !important;
  font-size: 25px;
  height: 65px;
  line-height: 25px;
}
.form.form-step {
  width: 100%;
  height: initial;
  position: relative;
}
.form.form-step .after_select {
  margin: 10px 0px 35px;
}
.form.form-step .after_select .r {
  display: inline-block;
  width: 100%;
  margin-bottom: 2px;
}
.form.form-step .after_select .r .left {
  float: left;
  font-size: 25px;
  line-height: 40px;
}
.form.form-step .after_select .r .right {
  float: right;
  color: #fc1b79;
  font-size: 35px;
  line-height: 35px;
}
.form.form-step .after_select .r:last-child .right {
  font-size: 26px;
}

.forSMS {
  width: 92%;
  position: relative;
  min-height: 250px;
  display: inline-block;
  margin-top: 20px;
}

.gb-btn {
  display: inline-block;
  position: relative;
  min-height: 44px;
}
.gb-btn .in {
  float: left;
  padding: 5px 20px;
  text-align-last: left;
  border: 1px solid #555;
  font-size: 20px;
  margin-right: 15px;
  border-radius: 4px;
}
.gb-btn .in.active {
  background: #555;
  color: #fff;
}

.gotoback {
  position: absolute;
  bottom: 120px;
  right: 62px;
  background: #0091d2;
  z-index: 200;
  color: #fff;
  font-size: 16px;
  padding: 0px 20px 2px;
  display: none;
}

.btn-vdo {
  position: relative;
  width: 51px !important;
  left: inherit;
  top: -15px;
  height: auto !important;
  display: none;
}

.hot {
  position: absolute;
  left: -5px;
  top: 40px;
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  transform: rotate(-20deg);
  z-index: 2;
  display: none;
}
.hot img {
  position: relative !important;
  width: 90px !important;
  margin: initial;
  height: initial !important;
  -webkit-box-reflect: initial !important;
}
.hot span {
  position: absolute;
  top: -19px;
  left: 22px;
  background: #e50484;
  color: #fff;
  font-size: 21px;
  padding-right: 10px;
  font-weight: bold;
  padding-left: 3px;
}

.owl-loaded .owl-prev {
  left: 5px;
  top: 50%;
  width: 50px;
  display: inline-block;
  position: absolute;
  transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.owl-loaded .owl-prev.disabled {
  display: none !important;
}
.owl-loaded .owl-next {
  right: 5px;
  top: 50%;
  width: 50px;
  display: inline-block;
  position: absolute;
  transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.owl-loaded .owl-next.disabled {
  display: none !important;
}

.scroll-down-2 .arrow-holder.arr-left {
  top: 50%;
  left: initial;
  right: -80px;
  display: block;
  transform: translateY(-50%) rotate(-90deg) scale(0.5);
  -o-transform: translateY(-50%) rotate(-90deg) scale(0.5);
  -ms-transform: translateY(-50%) rotate(-90deg) scale(0.5);
  -moz-transform: translateY(-50%) rotate(-90deg) scale(0.5);
  -webkit-transform: translateY(-50%) rotate(-90deg) scale(0.5);
}
.scroll-down-2 .arrow-holder .arrow-left {
  border-right: 30px solid black;
}

.choose-price {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  z-index: 2;
  display: none;
}
.choose-price img {
  width: 90px;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%);
  -o-transform: translate(-50%);
  -ms-transform: translate(-50%);
  -moz-transform: translate(-50%);
  -webkit-transform: translate(-50%);
}
.choose-price:before {
  content: "";
  position: absolute;
  bottom: -22px;
  width: 220px;
  height: 22px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.5);
  z-index: 0;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.after-head {
  color: #000;
  margin: 0 auto;
  position: relative;
  text-align: center;
  font-size: 16px;
  line-height: 23px;
}
.after-head big {
  font-size: 29px;
  margin: 0px 10px;
}
.after-head .color-text {
  display: none;
}

.form {
  padding: 15px;
}

.form-color {
  position: relative;
  text-align: center;
  margin-top: 5px;
}
.form-color .form-color-box {
  border-radius: 4px;
  background: #f1f1f1;
  display: inline-block;
  padding: 9px 10px 0px;
  text-align: center;
  min-width: 60px;
  width: 100px;
  height: 84px;
  min-height: 75px;
  margin: 5px;
  border: 2px solid #f1f1f1;
  vertical-align: middle;
}
.form-color .form-color-box.active {
  border: 2px solid #00a5e5;
}
.form-color .form-color-box .f-color {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}
.form-color .form-color-box .f-text {
  color: #000;
  font-size: 13px;
  line-height: 4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-color,
.cancel_color {
  font-size: 16px !important;
  height: 40px !important;
  line-height: 18px !important;
  width: 130px !important;
}

.test-box {
  width: 100%;
  overflow-y: auto;
  max-height: 500px;
  background: #000;
  position: relative;
}
.test-box .test {
  position: relative;
  overflow: hidden;
  height: 100%;
}
.test-box .test iframe {
  overflow: hidden;
  height: 100%;
}

.text-over-vdo {
  left: 50px;
  bottom: 58px;
  color: #fff;
  font-size: 32px;
  position: absolute;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.reward {
  z-index: 2;
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: inline-block;
}
.reward .detail {
  width: 100%;
  height: 1080px;
  position: relative;
  margin: 0 auto;
  background-color: #fafbff;
}
.reward iframe {
  z-index: 0;
  width: 100%;
  height: 100%;
  position: relative;
  margin-top: -120px;
}
.reward .iframe-box {
  width: 100%;
  height: calc(100% + 150px);
  position: relative;
  overflow: hidden;
}
.reward .gotoback {
  z-index: 2;
  bottom: -80px;
  right: 0;
  left: 0;
  width: 110px;
  margin: 0 auto;
  text-align: center;
  display: inline-block;
}
.reward .thumb {
  float: left;
  width: 50%;
  display: inline-block;
  position: relative;
  padding: 20px 25px;
}
.reward .thumb:first-child .inner {
  position: relative;
}
.reward .thumb:first-child .inner:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background-color: #e8e8e8;
}
.reward .thumb:nth-child(2) .inner {
  position: relative;
}
.reward .thumb:nth-child(2) .inner:after {
  content: "";
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 80%;
  background-color: #e8e8e8;
}
.reward .thumb:nth-child(2) .inner:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background-color: #e8e8e8;
}
.reward .thumb:nth-child(4) .inner {
  position: relative;
}
.reward .thumb:nth-child(4) .inner:after {
  content: "";
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 80%;
  background-color: #e8e8e8;
}
.reward .thumb .inner {
  width: 100%;
  position: relative;
}
.reward .thumb .inner .cover {
  width: 100%;
  height: 180px;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.reward .thumb .inner .text {
  width: 100%;
  position: relative;
  max-height: 150px;
  overflow: hidden;
}
.reward .thumb .inner .text h1 {
  font-size: 24px;
  line-height: 28px;
  color: #12aced;
  margin: 18px 0px 12px;
  font-weight: bold;
  letter-spacing: 1px;
}
.reward .thumb .inner .text p {
  color: #000;
  font-size: 20px;
  line-height: 31px;
  margin-bottom: 15px;
  margin-top: 5px;
}
.reward .thumb .inner button {
  height: 45px;
  width: 200px;
  font-size: 18px;
  line-height: 14px;
  padding-top: 9px;
}

.lds-ellipsis {
  top: 52%;
  left: 50%;
  width: 64px;
  height: 64px;
  zoom: 1.5;
  display: inline-block;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.lds-ellipsis div {
  position: absolute;
  top: 27px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #12aced;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}
#eleaflet {
  width: 750px;
  zoom: 1.5;
  margin-left: -15px;
  min-height: 200px;
  margin-top: 25px;
}
#eleaflet .slide {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
#eleaflet .slide .owl-stage-outer {
  overflow: initial;
}
#eleaflet .slide .owl-stage-outer .owl-stage {
  height: auto;
  overflow: hidden;
}
#eleaflet .slide .owl-nav .owl-next {
  top: 46%;
  right: 32px;
  zoom: 1.25;
  cursor: pointer;
}
#eleaflet .slide .owl-nav .owl-prev {
  top: 46%;
  left: 32px;
  zoom: 1.25;
  cursor: pointer;
}
#eleaflet .item {
  margin: 0 auto;
  margin-bottom: 90px;
  position: relative;
  text-align: center;
}
#eleaflet .item img {
  position: relative;
}
#eleaflet .item .icon-download {
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  -ms-border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
#eleaflet .item button {
  left: 0;
  right: 0;
  width: 300px;
  bottom: -70px;
  margin: 0 auto;
  position: absolute;
}

.toggleShortcut {
  display: none;
}

.header {
  position: relative;
  width: 100%;
  text-align: center;
  top: 48px;
  font-size: 25px;
  letter-spacing: 0px;
}
.header h2 {
  font-size: 48px;
  line-height: 48px;
  margin-bottom: 16px;
}

.clearfix {
  float: left;
  width: 100%;
  height: 30px;
  display: inline-block;
}

.toback {
  bottom: 140px;
  right: 10px;
  width: 40px;
  position: absolute;
}

::-webkit-scrollbar {
  display: none;
}

.reward-cate h3 {
  font-weight: bold;
  padding-top: 30px;
  font-size: 32px;
  padding-bottom: 15px;
}
.reward-cate .wrap {
  padding: 15px;
  height: auto;
  overflow: hidden;
}
.reward-cate .wrap .list {
  float: left;
  width: 20%;
  position: relative;
}
.reward-cate .wrap .list:after {
  content: "";
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 90%;
  background-color: #e8e8e8;
}
.reward-cate .wrap .list:last-child:after {
  display: none;
}
.reward-cate .wrap .list .inner {
  padding: 7px 7px;
  text-align: center;
}
.reward-cate .wrap .list .inner img {
  width: auto;
  height: 50px;
}
.reward-cate .wrap .list .inner p {
  text-align: center;
  padding-top: 15px;
}

.page-head {
  overflow: hidden;
  width: 100%;
  position: relative;
  padding: 25px 15px;
  padding-left: 130px;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
  font-family: "dtac";
  font-weight: 700;
  font-size: 36px;
  line-height: 2;
  color: #000;
}
.page-head span {
  font-family: "dtac";
}
.page-head span img {
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
}

.page-content {
  background-color: #fafbff;
  padding: 30px 40px;
  height: 1165px;
}
.page-content .wrapper {
  overflow: hidden;
  border-radius: 20px;
}
.page-content .wrapper .box {
  width: 50%;
  float: left;
  text-align: center;
}
.page-content .wrapper .box .wrapper {
  padding: 77px 20px;
  margin: 10px;
}
.page-content .wrapper .box .wrapper .img {
  height: 150px;
}
.page-content .wrapper .box .wrapper img {
  width: auto;
  height: 150px;
  margin: auto;
}
.page-content .wrapper .box .wrapper h4 {
  font-weight: bold;
  font-size: 27px;
  padding-top: 15px;
}
.page-content .wrapper .box:first-child .wrapper {
  background-color: #b0f8d4;
}
.page-content .wrapper .box:nth-child(2) .wrapper {
  background-color: #c6faf8;
}
.page-content .wrapper .box:nth-child(3) .wrapper {
  background-color: #88e2ff;
}
.page-content .wrapper .box:nth-child(4) .wrapper {
  background-color: #afe7ff;
}
.page-content .wrapper .title {
  font-size: 36px;
  text-align: center;
  font-weight: bold;
  padding: 30px 0;
}
.page-content .wrapper .home-menu-list {
  display: block;
}
.page-content .wrapper .home-menu-list .list {
  display: inline-block;
  width: 33%;
  vertical-align: middle;
  position: relative;
}
.page-content .wrapper .home-menu-list .list .wrapper {
  text-align: center;
  padding: 25px 25px;
  margin: 10px;
}
.page-content .wrapper .home-menu-list .list .wrapper img {
  width: auto;
  height: 100px;
}
.page-content .wrapper .home-menu-list .list .wrapper h4 {
  padding-top: 10px;
  font-size: 24px;
  font-weight: bold;
}
.page-content .wrapper .home-menu-list .list:first-child .wrapper {
  background-color: #feccbe;
}
.page-content .wrapper .home-menu-list .list:nth-child(2) .wrapper {
  background-color: #febfbb;
}
.page-content .wrapper .home-menu-list .list:nth-child(3) .wrapper {
  background-color: #fdacaa;
}

.overlay {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  left: 0;
  top: 0;
  display: none;
  z-index: 51;
}

#menu3 .detail {
  background: #fafbff;
  width: 100%;
  height: 100%;
}
#menu3 .banner {
  width: 100%;
  height: 500px;
}
#menu3 .banner img {
  width: 100%;
}
#menu3 .number-box,
#menu3 .input-box {
  width: 80%;
  background-color: #fff;
  border-radius: 20px;
  margin: auto;
  margin-top: 30px;
  overflow: hidden;
  padding: 50px;
  box-sizing: border-box;
}
#menu3 .number-box h1,
#menu3 .input-box h1 {
  font-size: 30px;
  line-height: 1.5;
  text-align: center;
}
#menu3 .number-box .number,
#menu3 .input-box .number {
  width: 100%;
  padding: 40px 0;
  position: relative;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#menu3 .number-box .number .textfield,
#menu3 .input-box .number .textfield {
  height: 140px;
  line-height: 130px;
  font-size: 75px;
  border-radius: 20px;
  -ms-border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
}
#menu3 .number-box span,
#menu3 .input-box span {
  color: white;
  padding: 20px 0;
  display: block;
  font-size: 14px;
  text-align: center;
  position: relative;
}
#menu3 .input-box .number .textfield {
  color: black;
  border: 1px solid white;
  background: #f7f7f7;
}
#menu3 .btn {
  width: 100%;
  text-align: center;
}
#menu3 .btn button {
  float: none;
}
#menu3 .btn button.sm {
  width: 200px;
  height: 80px;
  margin: 0;
}
#menu3.otp .number-box {
  top: 503px;
}
#menu3.otp .number-box h1 {
  padding: 20px 0 50px;
  text-align: left;
  font-size: 30px;
}
#menu3.otp .number-box .number {
  width: 100%;
  margin: 0 auto;
  padding: 0 0 20px;
  overflow: hidden;
}
#menu3.otp .number-box .number .textfield {
  float: left;
  width: 100%;
  border-radius: 20px 0px 0px 20px;
  -ms-border-radius: 20px 0px 0px 20px;
  -moz-border-radius: 20px 0px 0px 20px;
  -webkit-border-radius: 20px 0px 0px 20px;
}
#menu3.otp .number-box .number .resend {
  float: right;
  width: 300px;
  height: 65px;
  border: none;
  padding: 0px 30px;
  border: 1px solid #707070;
  background: transparent;
}
#menu3.otp .text {
  width: 100%;
  padding: 0 120px;
  position: relative;
  text-align: center;
}
#menu3.otp .text h1 {
  font-size: 30px;
  line-height: 60px;
  text-align: center;
}
#menu3.otp .input-box {
  position: relative;
}
#menu3.menu1 .owl-prev {
  left: -50px;
  opacity: 1;
}
#menu3.menu1 .owl-prev.disabled {
  opacity: 0;
}
#menu3.menu1 .owl-next {
  right: -50px;
  opacity: 1;
}
#menu3.menu1 .owl-next.disabled {
  opacity: 0;
}
#menu3.menu1 .keyboard-overlay {
  background: rgba(0, 0, 0, 0.65);
}
#menu3.menu1 .number-box {
  top: 503px;
  padding-top: 0px;
  z-index: 900;
}
#menu3.menu1 .number-box .number {
  padding: 0px 200px 20px;
}
#menu3.menu1 .number-box .textfield {
  color: black;
  height: 100px;
  line-height: 80px;
  font-size: 60px;
  background: #fed231;
}
#menu3.menu1 .number-box h1 {
  padding: 20px 0;
}
#menu3.menu1 .package-list-wrap {
  position: relative;
}
#menu3.menu1 .package-list-wrap .item {
  width: 100%;
  height: 100%;
  position: relative;
}
#menu3.menu1 .package-list-wrap .pack-custom .list {
  margin-bottom: 50px;
  display: block;
}
#menu3.menu1 .package-list-wrap .pack-custom .list:last-child {
  padding-bottom: 200px;
}
#menu3.menu1 .package-title {
  width: 100%;
  position: relative;
}
#menu3.menu1 .package-title .title {
  font-size: 35px;
  font-weight: bold;
  padding: 25px 0;
}
#menu3.menu1 .package-title .prev,
#menu3.menu1 .package-title .next {
  top: 0px;
  left: -20px;
  bottom: 0px;
  margin: auto;
  width: 50px;
  height: 50px;
  position: absolute;
}
#menu3.menu1 .package-title .prev img,
#menu3.menu1 .package-title .next img {
  width: 100%;
}
#menu3.menu1 .package-title .next {
  left: auto;
  right: -20px;
}
#menu3.menu1 .package-box {
  margin: auto;
  padding: 20px;
  position: relative;
  background: white;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-radius: 30px;
  -ms-border-radius: 30px;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px;
}
#menu3.menu1 .package-box.package-highlight {
  background: none;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
  -webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
}
#menu3.menu1 .package-box .current-pack {
  width: 580px;
  height: 80px;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#menu3.menu1 .package-box .current-pack .left {
  top: 0px;
  left: 0px;
  width: 330px;
  position: absolute;
}
#menu3.menu1 .package-box .current-pack .left h3 {
  font-size: 25px;
  display: block;
  padding-bottom: 10px;
}
#menu3.menu1 .package-box .current-pack .left span {
  font-size: 20px;
}
#menu3.menu1 .package-box .current-pack .left span span {
  color: white;
  padding-left: 10px;
}
#menu3.menu1 .package-box .current-pack .right {
  top: 0px;
  right: 0px;
  width: 200px;
  position: absolute;
}
#menu3.menu1 .package-box .current-pack .right .c-price {
  top: 0px;
  right: 60px;
  color: white;
  font-size: 60px;
  position: absolute;
  text-align: right;
}
#menu3.menu1 .package-box .current-pack .right .c-price2 {
  top: 10px;
  right: 0px;
  width: 60px;
  color: white;
  font-size: 22px;
  position: absolute;
  display: inline-block;
}
#menu3.menu1 .package-box .current-pack .right .c-p {
  top: 34px;
  right: 0px;
  width: 60px;
  font-size: 22px;
  position: absolute;
  display: inline-block;
}
#menu3.menu1 .package-box .pack-box h1 {
  height: 330px;
  line-height: 330px;
  text-align: center;
  font-size: 60px;
  color: white;
}
#menu3.menu1 .package-box .scroll {
  width: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
}
#menu3.menu1 .package-box .scroll .package-list {
  width: 100%;
  padding: 10px 0 0px;
  position: relative;
  border-bottom: 1px solid #aaa;
}
#menu3.menu1 .package-box .scroll .package-list .package-name {
  width: 500px;
  min-height: 50px;
  padding-top: 10px;
  font-size: 30px;
  line-height: 40px;
  position: relative;
  text-align: left;
}
#menu3.menu1 .package-box .scroll .package-list .size {
  color: #12aced;
  width: 150px;
  min-height: 50px;
  padding-top: 10px;
  font-size: 30px;
  line-height: 50px;
  text-align: center;
  position: relative;
}
#menu3.menu1 .package-box .scroll .package-list .day {
  color: #12aced;
  bottom: 0px;
  left: 150px;
  width: 150px;
  height: 50px;
  font-size: 30px;
  line-height: 50px;
  text-align: center;
  position: absolute;
}
#menu3.menu1 .package-box .scroll .package-list .price {
  bottom: 0px;
  left: 300px;
  width: 330px;
  height: 100px;
  position: absolute;
}
#menu3.menu1 .package-box .scroll .package-list .price span {
  color: #888;
  left: 0px;
  bottom: 0px;
  width: 100px;
  height: 40px;
  display: block;
  font-size: 25px;
  line-height: 40px;
  position: absolute;
}
#menu3.menu1 .package-box .scroll .package-list .price h3 {
  color: #fc1b79;
  right: 0px;
  bottom: 0px;
  width: 250px;
  height: 100px;
  font-size: 70px;
  text-align: right;
  line-height: 100px;
  position: absolute;
}
#menu3.menu1 .package-box .scroll .package-list .btn {
  top: auto;
  bottom: 10px;
  right: 0px;
  width: 100px;
  height: 100px;
  position: absolute;
}
#menu3.menu1 .package-box .scroll .package-list .btn button {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 30px;
  border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}
#menu3.menu1 .package-box .scroll .package-detail {
  width: 100%;
  position: relative;
  padding: 0 40px;
}
#menu3.menu1 .package-box .scroll .package-detail .banner {
  top: 0px;
  width: 100%;
  height: 151px;
  text-align: center;
  position: relative;
}
#menu3.menu1 .package-box .scroll .package-detail .banner img {
  width: auto;
  height: auto;
}
#menu3.menu1 .package-box .scroll .package-detail .banner.full {
  width: 100%;
  height: auto;
}
#menu3.menu1 .package-box .scroll .package-detail .package-name {
  width: 100%;
  padding: 10px;
  font-size: 45px;
  line-height: 63px;
  position: relative;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#menu3.menu1 .package-box .scroll .package-detail .package-name.big-text {
  line-height: 70px;
  padding: 10px;
}
#menu3.menu1 .package-box .scroll .package-detail .package-name span {
  color: white;
  display: block;
  line-height: 40px;
  font-size: 35px;
}
#menu3.menu1 .package-box .scroll .package-detail .package-name small {
  display: block;
  font-size: 23px;
  line-height: 23px;
  padding: 10px 0 0;
}
#menu3.menu1 .package-box .scroll .package-detail .price {
  width: 100%;
  position: relative;
  text-align: center;
  padding-bottom: 30px;
}
#menu3.menu1 .package-box .scroll .package-detail .price h3 {
  color: #fc1b79;
  font-size: 140px;
}
#menu3.menu1 .package-box .scroll .package-detail .price span {
  color: #888;
  font-size: 60px;
}
#menu3.menu1 .package-box .scroll .package-detail .benefit {
  width: 100%;
  min-height: 46px;
  padding: 30px 0;
  position: relative;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid lightgray;
}
#menu3.menu1 .package-box .scroll .package-detail .benefit span {
  color: #12aced;
  line-height: 46px;
  font-size: 30px;
  padding: 5px 10px;
  display: inline-block;
}
#menu3.menu1 .package-box .scroll .package-detail .benefit span img {
  float: left;
  height: 28px;
  padding: 9px 10px;
}
#menu3.menu1 .package-box .scroll .package-detail .desc1 {
  padding: 30px 50px;
  position: relative;
  border-top: 1px solid lightgray;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#menu3.menu1 .package-box .scroll .package-detail .desc1 ul {
  margin: 0;
}
#menu3.menu1 .package-box .scroll .package-detail .desc1 li {
  font-size: 25px;
  line-height: 45px;
}
#menu3.menu1 .package-box .scroll .package-detail .desc {
  color: #888;
  width: 100%;
  font-size: 25px;
  line-height: 35px;
  padding: 30px 0px 0px 30px;
  position: relative;
  text-align: left;
  border-top: 1px solid lightgray;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#menu3.menu1 .package-box .scroll .package-detail .btn {
  top: 0px;
  position: relative;
}
#menu3.menu1 .package-list-wrap {
  position: relative;
  padding: 20px;
}
#menu3.menu1 .package-list-wrap .pack-box {
  padding: 40px;
}
#menu3.menu1 .package-list-wrap .item {
  width: 100%;
  height: 100%;
  position: relative;
}
#menu3.menu1 .package-list-wrap .item:not(:first-child) .package-title {
  display: none;
}
#menu3.menu1 .package-list-wrap .package-box {
  margin: 0 auto;
  width: 100%;
  height: auto;
  position: relative;
}
#menu3.menu1 .package-list-wrap .id-nav.id-left {
  left: -40px;
}
#menu3.menu1 .package-list-wrap .id-nav.id-right {
  right: -40px;
}
#menu3.menu1 #btn-home {
  width: 500px;
  bottom: 145px;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding-top: 30px;
  text-align: center;
}
#menu3.menu1 #btn-home img {
  width: 100px;
  position: relative;
}
#menu3.menu1 #btn-home p {
  font-size: 35px;
  line-height: 35px;
  margin-top: 10px;
  position: relative;
  -webkit-font-smoothing: antialiased;
}
#menu3.menu1 .btn.alert .btn-home {
  width: 500px;
  bottom: 195px;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding-top: 30px;
  text-align: center;
}
#menu3.menu1 .btn.alert .btn-home img {
  position: relative;
}
#menu3.menu1 .btn.alert .btn-home p {
  color: #fff;
  font-size: 44px;
  line-height: 36px;
  margin-top: 28px;
  position: relative;
  -webkit-font-smoothing: antialiased;
}
#menu3.menu1 .alert {
  opacity: 0;
  z-index: 900;
  display: none;
}
#menu3.menu1 .select-menu {
  top: 1360px;
}
#menu3.menu1 .select-menu .row-btn {
  text-align: center;
}
#menu3.menu1 .select-menu .row-btn .btn {
  top: auto;
  width: auto;
  position: relative;
  overflow: hidden;
  display: inline-block;
}
#menu3.menu1 .select-menu .row-btn .btn button {
  float: left;
  background: none;
  border: 1px solid white;
}
#menu3.menu1 .select-menu .row-btn .btn button.active {
  background: #12aced;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.3) 5px 5px 5px;
  -moz-box-shadow: rgba(0, 0, 0, 0.3) 5px 5px 5px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 5px 5px 5px;
}

.row {
  position: relative;
  width: 100%;
  display: inline-block;
}
.row .col-6 {
  padding: 0 7px;
}
.row .col-6:first-child {
  padding-left: 0;
}
.row .col-6:last-child {
  padding-right: 0;
}
.row .col-6 button {
  width: 100%;
}

#alert-finish {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1000;
  display: none;
}
#alert-finish .overlay {
  top: 0px !important;
  left: 0px !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  display: none;
  background: rgba(0, 0, 0, 0.7) !important;
}
#alert-finish .panel {
  color: white;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  margin: auto;
  font-size: 45px;
  line-height: 70px;
  position: absolute;
  padding: 150px 50px;
  background: #12aced;
  text-align: center;
  display: table;
  opacity: 0;
  border: 1px solid white;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#alert-finish .panel .text {
  display: table-cell;
  vertical-align: middle;
}
#alert-finish a {
  left: 0px;
  right: 0px;
  bottom: 200px;
  width: 200px;
  height: 200px;
  margin: auto;
  position: absolute;
  text-align: center;
}
#alert-finish a p {
  color: white;
  height: 100px;
  font-size: 45px;
  line-height: 100px;
}
#alert-finish .loading {
  z-index: 999;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 500px;
  height: 400px;
  margin: auto;
  position: absolute;
}
#alert-finish .loading .image {
  top: 0px;
  left: 0px;
  right: 0px;
  width: 300px;
  height: 300px;
  opacity: 0;
  margin: 0 auto;
  position: absolute;
  background: url("../images/loading.png") center center no-repeat;
  background-size: contain;
}
#alert-finish .loading span {
  color: white;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 100px;
  line-height: 100px;
  font-size: 50px;
  display: block;
  position: absolute;
  text-align: center;
  letter-spacing: 10px;
}

.pack-custom {
  position: relative;
}
.pack-custom .list {
  margin-bottom: 0px;
}
.pack-custom .list .pack-name {
  font-size: 35px;
  font-weight: bold;
  padding: 25px 0;
}
.pack-custom .list .inner-b {
  position: relative;
  background-color: #fff;
  padding: 50px;
  border-radius: 20px;
}
.pack-custom .list .inner-b .img-banner {
  position: absolute;
  right: 0;
  top: -60px;
  width: 270px;
}
.pack-custom .list .inner-b .hr {
  width: 100%;
  height: 1px;
  background-color: #e8e8e8;
  position: relative;
  margin: 50px 0;
}
.pack-custom .list .inner-b h4 {
  padding-top: 40px;
  text-align: center;
  font-size: 35px;
  line-height: 48px;
}
.pack-custom .list .inner-b .detail-inner {
  display: block;
  position: relative;
}
.pack-custom .list .inner-b .detail-inner .left {
  width: 50%;
  display: inline-block;
}
.pack-custom .list .inner-b .detail-inner .left .left-list .line {
  position: relative;
  font-size: 35px;
  font-weight: bold;
  line-height: 35px;
  padding-left: 50px;
  padding-top: 30px;
  padding-bottom: 30px;
}
.pack-custom .list .inner-b .detail-inner .left .left-list .line .icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 35px;
}
.pack-custom .list .inner-b .detail-inner .right {
  width: 49%;
  display: inline-block;
  vertical-align: top;
  text-align: right;
  font-size: 35px;
  font-weight: bold;
}
.pack-custom .list .inner-b .detail-inner .right span {
  font-size: 72px;
  color: #000;
}
.pack-custom .list .inner-b .detail-inner .right button {
  width: 300px;
  position: absolute;
  right: 0;
  bottom: 0;
}
.pack-custom .list:not(:first-child) .pack-name {
  display: none;
}

#menu4 .menu {
  padding: 0 20px;
}
#menu4 .menu .box {
  width: auto;
  padding: 35px 12px;
}

#menu4menu1.menu5 .menu .box {
  width: 25%;
  text-align: center;
  margin: 0 15px;
  margin: 0 41px;
}

#menu4menu1 .title {
  top: 200px;
  left: 0px;
  right: 0px;
  width: 850px;
  margin: auto;
  position: absolute;
}
#menu4menu1 .title img {
  width: 100%;
}
#menu4menu1 .total-number {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-color: #fafbff;
}
#menu4menu1 .total-number .item {
  width: 25%;
  display: inline-block;
  padding: 20px 0;
  position: relative;
  text-align: center;
}
#menu4menu1 .total-number .item .box {
  background-color: #fff;
  width: 180px;
  height: 133px;
  border-radius: 20px;
  margin: auto;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  position: relative;
}
#menu4menu1 .total-number .item a {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 72px;
  font-weight: bold;
}
#menu4menu1 .total-number.zodiac-item {
  width: 100%;
  background-image: url("../images/zodiac-number-bg.png");
  padding-top: 0;
}
#menu4menu1 .total-number.zodiac-item .item {
  width: 100%;
  padding: 12px 50px;
  display: block;
}
#menu4menu1 .total-number.zodiac-item .item .box {
  background-color: transparent;
  width: 22.33%;
  height: auto;
  margin: 9px 45px;
  box-shadow: none;
  display: inline-block;
}
#menu4menu1 .total-number.zodiac-item .item .box a {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
}
#menu4menu1 .console {
  left: 0px;
  right: 0px;
  bottom: -15px;
  width: 900px;
  margin: auto;
  position: absolute;
  text-align: center;
}
#menu4menu1 .console .btn {
  overflow: hidden;
  position: relative;
  display: inline-block;
}
#menu4menu1 .console .btn .btn-icon {
  float: left;
  width: 300px;
  height: 200px;
  position: relative;
  text-align: center;
  padding: 20px 50px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#menu4menu1 .console .btn .btn-icon img {
  width: 40%;
}
#menu4menu1 .console .btn .btn-icon h3 {
  color: white;
  font-size: 25px;
  padding-top: 20px;
}

#menu4menu1list .detail-page,
#menu4menu2 .detail-page,
#menu4menu3 .detail-page {
  background-color: #fafbff;
  height: 100%;
  width: 100%;
  padding: 40px 30px;
}
#menu4menu1list .detail-page .card,
#menu4menu2 .detail-page .card,
#menu4menu3 .detail-page .card {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  padding: 40px 30px;
  margin-bottom: 30px;
}
#menu4menu1list .detail-page .card p,
#menu4menu2 .detail-page .card p,
#menu4menu3 .detail-page .card p {
  text-align: center;
  font-size: 30px;
  margin-bottom: 15px;
}
#menu4menu1list .title,
#menu4menu2 .title,
#menu4menu3 .title {
  width: 100%;
  margin: auto;
  position: relative;
  text-align: center;
  font-size: 100px;
  font-weight: bold;
  line-height: 100px;
  color: #000;
}
#menu4menu1list .notice-price-list,
#menu4menu2 .notice-price-list,
#menu4menu3 .notice-price-list {
  top: 1280px;
  left: 65px;
  width: 900px;
  height: 90px;
  position: absolute;
}
#menu4menu1list .notice-price-list span,
#menu4menu2 .notice-price-list span,
#menu4menu3 .notice-price-list span {
  color: white;
  display: block;
  line-height: 25px;
}
#menu4menu1list .num-pages,
#menu4menu2 .num-pages,
#menu4menu3 .num-pages {
  top: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
}
#menu4menu1list .num-pages ul,
#menu4menu2 .num-pages ul,
#menu4menu3 .num-pages ul {
  float: right;
  margin: 0px;
  padding: 0px;
  list-style: none;
  overflow: hidden;
}
#menu4menu1list .num-pages ul li,
#menu4menu2 .num-pages ul li,
#menu4menu3 .num-pages ul li {
  color: white;
  float: left;
  height: 50px;
  padding: 0 3px;
  font-size: 20px;
  line-height: 50px;
  position: relative;
}
#menu4menu1list .num-pages ul li.num-page,
#menu4menu2 .num-pages ul li.num-page,
#menu4menu3 .num-pages ul li.num-page {
  opacity: 0.5;
}
#menu4menu1list .num-pages ul li.num-page.active,
#menu4menu2 .num-pages ul li.num-page.active,
#menu4menu3 .num-pages ul li.num-page.active {
  opacity: 1;
}
#menu4menu1list .custom-number,
#menu4menu2 .custom-number,
#menu4menu3 .custom-number {
  width: 100%;
  position: relative;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  border-bottom: 1px solid white;
  background-color: #fff;
  padding: 30px;
}
#menu4menu1list .custom-number h1,
#menu4menu2 .custom-number h1,
#menu4menu3 .custom-number h1 {
  font-size: 30px;
  line-height: 40px;
  position: relative;
  text-align: center;
  padding-bottom: 30px;
}
#menu4menu1list .custom-number .number-wrap,
#menu4menu2 .custom-number .number-wrap,
#menu4menu3 .custom-number .number-wrap {
  width: 100%;
  padding: 20px 0;
  position: relative;
  overflow: hidden;
}
#menu4menu1list .custom-number .number-wrap button,
#menu4menu2 .custom-number .number-wrap button,
#menu4menu3 .custom-number .number-wrap button {
  margin-top: 35px;
}
#menu4menu1list .custom-number .number-wrap .number-box,
#menu4menu2 .custom-number .number-wrap .number-box,
#menu4menu3 .custom-number .number-wrap .number-box {
  float: left;
  width: 75px;
  height: 75px;
  padding: 3px;
  margin-right: 7px;
  position: relative;
  background: rgba(252, 27, 121, 0);
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-radius: 5px;
  -ms-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #e8e8e8;
  font-size: 60px;
  font-weight: bold;
}
#menu4menu1list .custom-number .number-wrap .number-box:focus,
#menu4menu2 .custom-number .number-wrap .number-box:focus,
#menu4menu3 .custom-number .number-wrap .number-box:focus {
  outline: 1px solid #00a5e5;
}
#menu4menu1list .custom-number .number-wrap .number-box.cn,
#menu4menu2 .custom-number .number-wrap .number-box.cn,
#menu4menu3 .custom-number .number-wrap .number-box.cn {
  background: #f7f7f7;
}
#menu4menu1list .custom-number .number-wrap .number-box.disable,
#menu4menu2 .custom-number .number-wrap .number-box.disable,
#menu4menu3 .custom-number .number-wrap .number-box.disable {
  margin-right: 0px;
  padding: 0;
  border-radius: 0px;
  -ms-border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border: 1px solid #dddddd;
  background: #dddddd;
}
#menu4menu1list .custom-number .number-wrap .number-box.disable span,
#menu4menu2 .custom-number .number-wrap .number-box.disable span,
#menu4menu3 .custom-number .number-wrap .number-box.disable span {
  color: #5d5d5d;
  font-size: 60px;
  line-height: 60px;
  font-weight: bold;
}
#menu4menu1list .custom-number .number-wrap .number-box.none-border,
#menu4menu2 .custom-number .number-wrap .number-box.none-border,
#menu4menu3 .custom-number .number-wrap .number-box.none-border {
  width: 40px;
  margin: 0;
  border: none;
}
#menu4menu1list .custom-number .number-wrap .number-box.none-border span,
#menu4menu2 .custom-number .number-wrap .number-box.none-border span,
#menu4menu3 .custom-number .number-wrap .number-box.none-border span {
  color: white;
  font-size: 70px;
  background: none;
  border: none;
}
#menu4menu1list .custom-number .number-wrap .number-box.active,
#menu4menu2 .custom-number .number-wrap .number-box.active,
#menu4menu3 .custom-number .number-wrap .number-box.active {
  background: #fc1b79;
}
#menu4menu1list .custom-number .number-wrap .refresh-btn,
#menu4menu2 .custom-number .number-wrap .refresh-btn,
#menu4menu3 .custom-number .number-wrap .refresh-btn {
  float: left;
  width: 70px;
  height: 75px;
  position: relative;
  padding: 6px 3px 3px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#menu4menu1list .custom-number .number-wrap .refresh-btn img,
#menu4menu2 .custom-number .number-wrap .refresh-btn img,
#menu4menu3 .custom-number .number-wrap .refresh-btn img {
  width: 100%;
}
#menu4menu1list .console,
#menu4menu2 .console,
#menu4menu3 .console {
  width: 100%;
  margin: auto;
  position: relative;
  text-align: left;
}
#menu4menu1list .console .pattern,
#menu4menu2 .console .pattern,
#menu4menu3 .console .pattern {
  width: 100%;
  padding: 10px 0;
  position: relative;
  overflow: hidden;
}
#menu4menu1list .console .pattern .box,
#menu4menu2 .console .pattern .box,
#menu4menu3 .console .pattern .box {
  float: left;
  width: 20%;
  height: 110px;
  padding: 0 10px;
  position: relative;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#menu4menu1list .console .pattern .box span,
#menu4menu2 .console .pattern .box span,
#menu4menu3 .console .pattern .box span {
  width: 100%;
  height: 100%;
  display: block;
  line-height: 110px;
  font-size: 40px;
  text-align: center;
  font-weight: bold;
  border-radius: 20px;
  -ms-border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
}
#menu4menu1list .console .pattern .box.active span,
#menu4menu2 .console .pattern .box.active span,
#menu4menu3 .console .pattern .box.active span {
  color: #fff;
}
#menu4menu1list .console .btn,
#menu4menu2 .console .btn,
#menu4menu3 .console .btn {
  width: 900px;
  overflow: hidden;
  position: relative;
  display: inline-block;
}
#menu4menu1list .console .btn .btn-icon,
#menu4menu2 .console .btn .btn-icon,
#menu4menu3 .console .btn .btn-icon {
  float: left;
  width: 300px;
  position: relative;
  text-align: center;
  padding: 20px 50px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#menu4menu1list .console .btn .btn-icon img,
#menu4menu2 .console .btn .btn-icon img,
#menu4menu3 .console .btn .btn-icon img {
  width: 40%;
}
#menu4menu1list .console .btn .btn-icon h3,
#menu4menu2 .console .btn .btn-icon h3,
#menu4menu3 .console .btn .btn-icon h3 {
  color: white;
  font-size: 25px;
  padding-top: 20px;
}
#menu4menu1list .console .btn .btn-icon.icon-left,
#menu4menu2 .console .btn .btn-icon.icon-left,
#menu4menu3 .console .btn .btn-icon.icon-left {
  right: 120px;
  position: absolute;
}
#menu4menu1list .console .btn .btn-icon.icon-right,
#menu4menu2 .console .btn .btn-icon.icon-right,
#menu4menu3 .console .btn .btn-icon.icon-right {
  right: -75px;
  position: absolute;
}

#menu4sum .title {
  top: 200px;
  left: 0px;
  right: 0px;
  width: 950px;
  margin: auto;
  position: absolute;
}
#menu4sum .title img {
  width: 100%;
}
#menu4sum .number-box,
#menu4sum .input-box {
  width: 100%;
  margin: auto;
  padding: 50px 50px;
  position: relative;
  background-color: #fff;
  border-radius: 20px;
  margin-bottom: 80px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#menu4sum .number-box .form-control,
#menu4sum .input-box .form-control {
  height: 100px;
}
#menu4sum .number-box h1,
#menu4sum .input-box h1 {
  font-size: 30px;
  line-height: 30px;
  text-align: left;
}
#menu4sum .number-box .hr,
#menu4sum .input-box .hr {
  margin: 50px 0 0px 0;
}
#menu4sum .number-box .total,
#menu4sum .input-box .total {
  padding-bottom: 25px;
}
#menu4sum .number-box .total span,
#menu4sum .input-box .total span {
  display: block;
  color: initial;
  float: left;
}
#menu4sum .number-box .total span:last-child,
#menu4sum .input-box .total span:last-child {
  float: right;
  display: none;
}
#menu4sum .number-box .number,
#menu4sum .input-box .number {
  width: 100%;
  padding: 15px 35px;
  position: relative;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#menu4sum .number-box .number .textfield,
#menu4sum .input-box .number .textfield {
  color: #000;
  line-height: 60px;
  font-size: 60px;
  font-weight: bold;
}
#menu4sum .number-box .number .tag,
#menu4sum .input-box .number .tag {
  top: -95px;
  right: 0px;
  margin: auto;
  position: absolute;
  text-align: center;
  width: 200px;
}
#menu4sum .number-box span,
#menu4sum .input-box span {
  color: white;
  padding: 20px 0;
  display: block;
  font-size: 25px;
  text-align: center;
  position: relative;
}
#menu4sum .input-box h1 {
  font-size: 45px;
}
#menu4sum .input-box h1.smaller {
  text-align: center;
  font-size: 30px;
  line-height: 30px;
  padding-bottom: 20px;
}
#menu4sum .input-box .number {
  padding: 15px 0;
}
#menu4sum .input-box .number .textfield {
  color: black;
  height: 100px;
  border: 1px solid white;
  background: #f7f7f7;
  padding: 15px;
}
#menu4sum .btn-confirm {
  width: 100%;
  position: relative;
  text-align: center;
}
#menu4sum .btn-refresh {
  width: 100%;
  position: relative;
  text-align: center;
}
#menu4sum .btn-refresh .circle-btn {
  width: 400px;
  height: 150px;
  margin: 0 auto;
  position: relative;
}
#menu4sum .btn-refresh .circle-btn .image {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
#menu4sum .btn-refresh .circle-btn .image img {
  width: 100%;
}
#menu4sum .btn-refresh .circle-btn span {
  color: black;
  width: 100%;
  display: block;
  font-size: 30px;
  padding: 20px;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#menu4sum .number-keyboard {
  bottom: 220px;
}

.detail-page {
  background-color: #fafbff;
  width: 100%;
  height: 100%;
  padding: 20px 15px;
}

.menu4 #promotion .menu {
  padding: 25px 15px 25px 15px;
}
.menu4 #promotion .menu .box {
  width: auto;
  padding: 35px 15px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  background-color: #fff;
  border-radius: 10px;
  margin: 0 10px;
  font-size: 28px;
}

.hr {
  width: 100%;
  height: 1px;
  background-color: #e8e8e8;
}

.zodiac-popup {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 99;
}
.zodiac-popup .overlay {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  display: block;
}
.zodiac-popup .panel {
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 700px;
  height: 300px;
  margin: auto;
  position: absolute;
  text-align: center;
  z-index: 99;
  background: #fff;
}
.zodiac-popup .panel .wrapper {
  padding: 30px;
}
.zodiac-popup .panel .wrapper h1 {
  font-size: 30px;
  line-height: 1.5;
  margin-bottom: 30px;
}
.zodiac-popup .panel .wrapper button {
  float: right;
}
.zodiac-popup .panel .wrapper .hr {
  margin: 0 0 30px 0;
}
.zodiac-popup .panel a {
  width: 200px;
  height: 200px;
  text-align: center;
}
.zodiac-popup .panel a p {
  color: white;
  height: 100px;
  font-size: 45px;
  line-height: 100px;
}

.zodiac-detail-custom .title img {
  width: 80%;
  margin: auto;
}

.pack-detail {
  height: 100vh !important;
  overflow: scroll;
}

.number-box-wrapper .wrapper .item {
  width: 25%;
  display: inline-block;
  padding: 20px;
  position: relative;
  text-align: center;
}
.number-box-wrapper .wrapper .item .box {
  background-color: #fff;
  width: 180px;
  height: 133px;
  border-radius: 20px;
  margin: auto;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  position: relative;
}
.number-box-wrapper .wrapper .item a {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 72px;
  font-weight: bold;
}
.number-box-wrapper .total-number {
  height: 950px;
}

.total-number {
  width: 100%;
  position: relative;
  height: auto;
  overflow: scroll;
  height: 800px;
  padding: 0px 0 300px 0;
}
.total-number .slide-num-list {
  text-align: left;
}
.total-number .slide-num-list .number {
  width: 33.33%;
  float: left;
}
.total-number .slide-num-list .number .inner {
  background-color: #fff;
  border-radius: 10px;
  padding: 18px 15px;
  margin: 18px 10px;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
}
.total-number .slide-num-list .number .inner .textfield {
  font-size: 32px;
  line-height: 38px;
  font-weight: 700;
  color: #000;
  height: 38px;
  overflow: hidden;
  text-align: left;
}
.total-number .slide-num-list .number .inner .textfield span {
  color: #00a5e5;
}
.total-number .slide-num-list .number .inner .hr {
  width: 100%;
  height: 1px;
  background-color: #e8e8e8;
  margin: 15px 0;
}
.total-number .slide-num-list .number .inner .total {
  font-size: 15px;
  text-align: left;
}
.total-number .slide-num-list .number .inner .total span:last-child {
  float: right;
  display: none;
}
.total-number .slide-num-list .number .tag {
  width: 100px;
  position: absolute;
  top: -18px;
}
.total-number h1 {
  font-size: 50px;
  line-height: 70px;
  padding: 15px 0 0px;
  text-align: center;
}
.total-number h1.err {
  font-size: 28px;
}
.total-number .id-nav {
  top: 0;
  width: 80px;
  height: 80px;
  z-index: 1000;
  border-radius: 50% !important;
  -ms-border-radius: 50% !important;
  -moz-border-radius: 50% !important;
  -webkit-border-radius: 50% !important;
}
.total-number .id-nav:hover {
  background-size: contain !important;
}
.total-number .id-nav.id-left {
  left: 650px;
}
.total-number .id-nav.id-right {
  right: 170px;
}
.total-number .id-nav .caption {
  left: -60px;
  bottom: -48px;
  color: black;
  width: 200px;
  font-size: 25px;
  position: absolute;
  text-align: center;
}

.special {
  padding: 0 30px;
  padding-top: 42px;
}
.special .list {
  margin-bottom: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid #e8e8e8;
}
.special .top {
  padding-top: 15px;
}
.special .top h3 {
  font-size: 30px;
  text-align: center;
  margin-bottom: 15px;
  font-weight: bold;
}
.special .top .wrapper {
  background-color: #e9eff4;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  padding: 30px;
}
.special .top .wrapper p {
  font-size: 28px;
  text-align: center;
  font-weight: bold;
  line-height: 40px;
}
.special .bottom h3 {
  text-align: center;
}
.special .bottom .number {
  padding: 0 0 30px 0;
  width: 100%;
  margin: auto;
  position: relative;
}
.special .bottom .number .inner {
  border: 20px;
  background-color: #fff;
  border-radius: 10px;
  padding: 25px 15px;
  margin: 15px;
  position: relative;
}
.special .bottom .number .inner .hr {
  margin: 25px 0;
}
.special .bottom .number .num-inner .textfield {
  width: 75%;
  display: inline-block;
  border-radius: 10px;
  font-size: 68px;
  padding: 35px 25px;
  font-weight: bold;
  line-height: 68px;
  background-color: #e9eff4;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
}
.special .bottom .number .num-inner .total {
  width: 20%;
  display: inline-block;
  float: right;
  border-radius: 10px;
  font-size: 68px;
  padding: 35px 25px;
  font-weight: bold;
  line-height: 68px;
  background-color: #e9eff4;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 12px;
}
.special .bottom .number .num-inner .total-text {
  position: absolute;
  top: -40px;
  right: 52px;
  font-size: 28px;
  font-weight: bold;
}

.thank.form-popup.popup-step {
  top: 0;
  height: 100%;
  background: rgba(1, 157, 223, 0.9);
}
.thank.form-popup.popup-step p {
  font-size: 2rem;
  line-height: 2;
}

#menu4menu3 .total-number .item,
#menu4menu2 .total-number .item {
  width: 100%;
  height: 100vh;
  overflow: scroll;
  padding-bottom: 1000px;
}

input,
textarea {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input {
    font-size: 40px !important;
  }
}

/*# sourceMappingURL=main.min.css.map */