@font-face {
  font-family: "HOK-title";
  src: url(../font/HOK-title.ttf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "HOK-text";
  src: url(../font/HOK-text.ttf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "AR_Bold";
  src: url(../font/AR_Bold.ttf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "AR";
  src: url(../font/AR.ttf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "CHS";
  src: url("../font/CHS.eot");
  src: url("../font/CHS.eot?#iefix") format("embedded-opentype"), url("../font/CHS.woff") format("woff"), url("../font/CHS.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "CHS_Bold";
  src: url("../font/CHS_Bold.eot");
  src: url("../font/CHS_Bold.eot?#iefix") format("embedded-opentype"), url("../font/CHS_Bold.woff") format("woff"), url("../font/CHS_Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "CHT";
  src: url("../font/CHT.eot");
  src: url("../font/CHT.eot?#iefix") format("embedded-opentype"), url("../font/CHT.woff") format("woff"), url("../font/CHT.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "CHT_Bold";
  src: url("../font/CHT_Bold.eot");
  src: url("../font/CHT_Bold.eot?#iefix") format("embedded-opentype"), url("../font/CHT_Bold.woff") format("woff"), url("../font/CHT_Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "NotoSansJP-Bold";
  src: url("../font/NotoSansJP-Bold.eot");
  src: url("../font/NotoSansJP-Bold.eot?#iefix") format("embedded-opentype"), url("../font/NotoSansJP-Bold.woff") format("woff"), url("../font/NotoSansJP-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "NotoSansJP-Regular";
  src: url("../font/NotoSansJP-Regular.eot");
  src: url("../font/NotoSansJP-Regular.eot?#iefix") format("embedded-opentype"), url("../font/NotoSansJP-Regular.woff") format("woff"), url("../font/NotoSansJP-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "MM_Bold";
  src: url(../font/MM_Bold.ttf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "MM";
  src: url(../font/MM.ttf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Frutiger Neue LT Pro Regular";
  src: url(../font/FrutigerNeueLTPro-Regular.ttf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Frutiger Neue LT Pro Bold";
  src: url(../font/FrutigerNeueLTPro-Bold.ttf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Frutiger Neue LT Pro Medium";
  src: url(../font/FrutigerNeueLTPro-Medium.ttf);
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: "HOK-text";
}

.hoktitle {
  font-family: "HOK-title";
}

.lang_ar {
  font-family: "AR";
}
.lang_ar .hoktitle {
  font-family: "AR_Bold";
}

.lang_tw {
  font-family: "CHT";
}
.lang_tw .hoktitle {
  font-family: "CHT_Bold";
}

.lang_cn {
  font-family: "CHS";
}
.lang_cn .hoktitle {
  font-family: "CHS_Bold";
}

.lang_my {
  font-family: "MM";
}
.lang_my .hoktitle {
  font-family: "MM_Bold";
}

.lang_ja {
  font-family: "NotoSansJP-Regular";
}
.lang_ja .hoktitle {
  font-family: "NotoSansJP-Bold";
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, figure {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

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

ol,
ul {
  list-style: none;
}

body {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100% !important;
  -webkit-touch-callout: none;
  -webkit-user-select: text;
  -webkit-touch-callout: none;
  word-break: break-all;
  word-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  font-weight: inherit;
}

strong,
i,
em {
  font-weight: normal;
  font-style: normal;
}

input,
select,
form {
  vertical-align: middle;
  outline: none;
}

img {
  border: none;
  vertical-align: top;
}

a,
button,
input,
select,
textarea,
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[onclick] {
  outline: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
}

a {
  -webkit-touch-callout: none;
  text-decoration: none;
  color: #666666;
  outline: 0;
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
  word-break: normal;
  outline: none;
}

/* reset */
body,
dl,
dd,
ul,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
p,
form {
  margin: 0;
  padding: 0;
}

:root {
  --screen-width: 1920;
  --screen-width2: 1920;
  --screen-maxwidth: 100vw;
}

@media screen and (min-width: 1921px) {
  :root {
    --screen-maxwidth: 100vw;
  }
}
@media screen and (max-width: 1920px) {
  :root {
    --screen-maxwidth: 100vw;
  }
}
@media screen and (max-width: 900px) {
  :root {
    --screen-width: 900;
    --screen-width2: 900;
  }
}
@media screen and (max-width: 600px) {
  :root {
    --screen-width: 750;
    --screen-width2: 750;
  }
}
@media screen and (min-width: 1500px) {
  :root {
    --screen-width: 2100;
  }
}
@media screen and (min-width: 2500px) {
  :root {
    --screen-maxwidth: 95vw;
  }
}
@media screen and (max-width: 600px) and (max-height: 600px) {
  :root {
    --screen-width: 750;
    --screen-width2: 750;
  }
}
@media screen and (max-width: 900px) and (max-height: 600px) {
  :root {
    --screen-width: 1334;
    --screen-width2: 1000;
  }
}
@media screen and (max-width: 400px) {
  :root {
    --screen-width: 750;
    --screen-width2: 750;
  }
}
.hok_nav {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-right: 24px;
  display: block;
  width: 100%;
  height: 66px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 980;
  background: rgba(0, 0, 0, 0.9);
  /*padding: 0 calc((100vw - 1920px)/2);*/
}

.hd_nv_logo {
  display: block;
  width: 88.5px;
  height: 30px;
  background: url(../img/nv_logos.png) no-repeat;
  background-size: 88.5px 30px;
  float: left;
  margin: 18px 0 0 24px;
}

.hd_nv_list {
  /*width: 712.5;*/
  /*height: 66px;*/
  float: left;
  margin: 0 0 0 39px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.hd_nv_list li {
  max-width: 178px;
  height: 66px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 27px;
  float: left;
  font-size: 10.5px;
  color: #b7b7b7;
  text-align: center;
  position: relative;
  cursor: pointer;
  margin-right: calc(37.5 / var(--screen-width) * var(--screen-maxwidth));
  text-transform: uppercase;
  display: flex;
}
.hd_nv_list li > a {
  color: #b7b7b7;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hd_nv_list li > a:hover {
  -webkit-filter: none !important;
  filter: none !important;
}
.hd_nv_list li span {
  width: 100%;
  display: inline-block;
  /*transform: scale(0.75);*/
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hd_nv_list li:last-child {
  margin-right: 0;
}

.nv_rt {
  position: relative;
  float: right;
}

.nv_rtbox {
  float: right;
}

.nv_more_btn.more_btn {
  float: left;
  margin-top: 16px;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
}
.nv_more_btn.more_btn .more_ibg {
  pointer-events: none;
}
.nv_more_btn.more_btn span {
  -webkit-background-clip: unset;
  -webkit-text-fill-color: #fff;
  color: #fff;
  background: none;
}
.lang_ru .nv_more_btn.more_btn span {
  line-height: 1.2;
  padding-top: calc(8 / var(--screen-width) * var(--screen-maxwidth));
}

.language_btn {
  display: block;
  float: left;
  width: 30px;
  height: 30px;
  background: url(../img/language_icon.png) no-repeat 100%/100%;
  margin-right: 30px;
  margin-top: 19.5px;
  position: relative;
}
.language_btn:after {
  content: "";
  width: 100%;
  height: 45px;
  position: absolute;
  left: 0;
  top: 33px;
}

.nv_rt_dn {
  width: 33px;
  height: 33px;
  background: url(../img/nav_mdnbtn.png) no-repeat;
  background-size: 100% 100%;
  float: left;
  margin-top: 18px;
}

.language_icon {
  display: inline-block;
  vertical-align: top;
  /*margin-top: 24;*/
  width: 30px;
  height: 30px;
  background: url(../img/language_icon.png) no-repeat 100%/100%;
  margin-right: 12px;
}

.language_xl_icon {
  display: inline-block;
  vertical-align: top;
  width: 13.5px;
  height: 6.75px;
  background: url(../img/language_xl_icon.png) no-repeat 100%/100%;
  margin: 12px 0 0 10.5px;
}

.language_btn:hover {
  color: #c7ac72;
  -webkit-filter: brightness(1);
  filter: brightness(1);
}

.language_btn:hover .language_icon {
  background: url(../img/language_icon_cur.png) no-repeat 100%/100%;
}

.language_btn:hover .language_xl_icon {
  background: url(../img/language_xl_iconcur.png) no-repeat 100%/100%;
}

.nvlk_btn {
  display: block;
  width: 30px;
  height: 30px;
  background: url(../img/discord.png) no-repeat 100%/100%;
  float: left;
  margin: 18px 0 0 13.5px;
}

.nvlk_btn:hover {
  -webkit-filter: brightness(1);
  filter: brightness(1);
}

.lang_br .nvlk_btn {
  margin-left: 7.5px;
}

.compra_btn {
  float: right;
  font-size: 10.5px;
  color: #b7b7b7;
  line-height: 34.5px;
  margin-right: 30px;
  margin-top: 19.5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}

.compra_icon {
  display: inline-block;
  vertical-align: top;
  width: 30px;
  height: 30px;
  background: url(../img/compra_icon.png) no-repeat 100%/100%;
}

.hok_fot {
  width: 100%;
  height: calc(704 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
  background: #000;
  overflow: hidden;
  z-index: 60;
}

.hok_store {
  width: 100%;
  height: calc(288 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/bot_store.jpg) no-repeat;
  background-size: 100% 100%;
  padding-top: calc(1 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
  z-index: 30;
}

.hok_store_btnbox {
  width: 100%;
  text-align: center;
  font-size: 0;
  margin: calc(60 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
}
.hok_store_btnbox a {
  display: inline-block;
  vertical-align: top;
  width: calc(50 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(50 / var(--screen-width) * var(--screen-maxwidth));
  margin: 0 calc(12 / var(--screen-width) * var(--screen-maxwidth));
  background-size: 100% 100%;
}
.hok_store_btnbox a.hok_store_btn1 {
  background: url(../img/store_discord.png) no-repeat;
  background-size: 100% 100%;
}
.hok_store_btnbox a.hok_store_btn2 {
  background: url(../img/store_facebook.png) no-repeat;
  background-size: 100% 100%;
}
.hok_store_btnbox a.hok_store_btn3 {
  background: url(../img/store_twitter.png) no-repeat;
  background-size: 100% 100%;
}
.hok_store_btnbox a.hok_store_btn4 {
  background: url(../img/store_youtube.png) no-repeat;
  background-size: 100% 100%;
}

.hok_store_para {
  width: 100%;
  text-align: center;
  font-size: calc(24 / var(--screen-width) * var(--screen-maxwidth));
  color: #242424;
  line-height: calc(30 / var(--screen-width) * var(--screen-maxwidth));
  margin: calc(28 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
}

.lang_en .hok_store_para {
  display: none;
}

.hok_store_pay {
  display: block;
  height: calc(60 / var(--screen-width) * var(--screen-maxwidth));
}

.hok_store_pay,
.hok_app_store,
.hok_apk_download {
  height: 5.1vh;
}

.hok_stbox a {
  margin: 0 1vh;
}

.fot_logo {
  width: 100%;
  text-align: center;
  margin: calc(70 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
}
.fot_logo a {
  display: inline-block;
  vertical-align: top;
  margin: 0 calc(36 / var(--screen-width) * var(--screen-maxwidth));
}
.fot_logo a:hover {
  -webkit-filter: brightness(200%);
  filter: brightness(200%);
}
.fot_logo a:nth-child(1) img {
  display: block;
  width: calc(245 / var(--screen-width) * var(--screen-maxwidth));
}
.fot_logo a:nth-child(2) img {
  display: block;
  width: calc(180 / var(--screen-width) * var(--screen-maxwidth));
}

.copyright {
  width: 100%;
  text-align: center;
  font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  color: #b7b7b7;
  line-height: calc(22 / var(--screen-width) * var(--screen-maxwidth));
  margin: calc(24 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
}

.lang_ar .copyright {
  direction: ltr;
}

.copyright_link {
  margin: calc(62 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
  text-align: center;
  font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  color: #ffffff;
  line-height: calc(24 / var(--screen-width) * var(--screen-maxwidth));
}
.copyright_link a {
  display: inline-block;
  vertical-align: top;
  margin: 0 calc(15 / var(--screen-width) * var(--screen-maxwidth));
  color: #fff;
  white-space: nowrap;
}

.hok_lang_xl {
  width: calc(186px * 0.75);
  position: absolute;
  left: 0;
  top: calc(88px * 0.75);
  z-index: 200;
  display: none;
  font-family: "HOK-text";
}
.hok_lang_xl .hok_lang_xllist {
  width: calc(186px * 0.75);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.9);
  padding-top: calc(30px * 0.75);
  padding-bottom: calc(26px * 0.75);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: height 1s;
  transition: height 1s;
}
.hok_lang_xl:after {
  content: "";
  width: calc(16px * 0.75);
  height: calc(16px * 0.75);
  background: url(../img/lang_xl_icon.png) no-repeat 100%/100%;
  position: absolute;
  left: 50%;
  top: calc(-8px * 0.75);
  margin-left: calc(-8px * 0.75);
}
.hok_lang_xl li {
  width: 100%;
  /*height: calc(42px * 0.75);*/
  line-height: 2;
  text-align: center;
  color: #ffffff;
  font-size: calc(16px * 0.75);
}
.hok_lang_xl li a {
  display: block;
  width: 100%;
  height: 100%;
  color: #ffffff;
  -webkit-transform: color 0.5s;
  transform: color 0.5s;
}
.hok_lang_xl li.cur a, .hok_lang_xl li:hover a {
  color: #fbd89b;
  -webkit-filter: brightness(1);
  filter: brightness(1);
}
.hok_lang_xl:hover + .language_btn {
  color: #c7ac72;
  -webkit-filter: brightness(1);
  filter: brightness(1);
}
.hok_lang_xl:hover + .language_btn .language_icon {
  background: url(../img/language_icon_cur.png) no-repeat 100%/100%;
}
.hok_lang_xl:hover + .language_btn .language_xl_icon {
  background: url(../img/language_xl_iconcur.png) no-repeat 100%/100%;
}

.language_btn:hover + .hok_lang_xl {
  opacity: 1;
}
.language_btn:hover + .hok_lang_xl .hok_lang_xllist {
  height: auto;
}

.lang_tr .hok_lang_xl {
  left: 0;
}

.nv_m_more {
  display: block;
  width: 28.5px;
  height: 28.5px;
  background: url(../img/nv_m_more.png) no-repeat 100%/100%;
  margin: 18px 22.5px 0 0;
  float: right;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  display: none;
}
.nv_m_more.hide {
  background: url(../img/nv_m_close.png) no-repeat 100%/100%;
}

.hov_m_morebox {
  width: 100%;
  height: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 950;
  background: rgba(17, 17, 17, 0.9);
  overflow: hidden;
  display: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}
.hov_m_morebox .hd_nv_list {
  width: calc(650 / var(--screen-width2) * var(--screen-maxwidth));
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  margin: 0 auto;
  float: none;
  display: block !important;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.hov_m_morebox .hd_nv_list::-webkit-scrollbar {
  width: calc(6 / var(--screen-width) * var(--screen-maxwidth));
}
.hov_m_morebox .hd_nv_list::-webkit-scrollbar-thumb {
  border-radius: calc(6 / var(--screen-width) * var(--screen-maxwidth));
  background: #fdfdfd;
}
.hov_m_morebox .hd_nv_list::-webkit-scrollbar-track {
  border-radius: calc(6 / var(--screen-width) * var(--screen-maxwidth));
  background: rgba(17, 17, 17, 0.9);
}
.hov_m_morebox .hd_nv_list li {
  width: 100%;
  max-width: unset;
  margin: 0;
  height: calc(104 / var(--screen-width2) * var(--screen-maxwidth));
  padding: 0;
  line-height: calc(104 / var(--screen-width2) * var(--screen-maxwidth));
  font-size: calc(32 / var(--screen-width2) * var(--screen-maxwidth));
  font-weight: bold;
  color: #fff;
  text-align: left;
}
.hov_m_morebox .hd_nv_list li a {
  display: block;
  width: 100%;
  color: #fff;
}
.hov_m_morebox.show {
  padding-top: calc(150 / var(--screen-width2) * var(--screen-maxwidth));
  height: 100%;
}

.lang_en .hov_m_morebox.show {
  height: 100%;
}

.hok_stbox {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 73.3vh;
  margin: 0 !important;
  text-align: center;
  visibility: hidden;
}
.lang_en .hok_stbox {
  visibility: hidden;
}

.lang_ja .hok_stbox,
.lang_de .hok_stbox,
.lang_fr .hok_stbox,
.lang_id .hok_stbox,
.lang_ms .hok_stbox,
.lang_ar .hok_stbox,
.lang_br .hok_stbox,
.lang_ru .hok_stbox,
.lang_tr .hok_stbox,
.lang_cn .hok_stbox,
.lang_tw .hok_stbox,
.lang_es .hok_stbox,
.lang_my .hok_stbox {
  visibility: visible;
}

.hok_stbox a {
  display: inline-block;
}
.hok_stbox a:hover {
  -webkit-filter: drop-shadow(rgba(255, 247, 192, 0.6) 0 0 4px) drop-shadow(rgba(255, 247, 192, 0.6) 0 0 4px) drop-shadow(rgba(255, 247, 192, 0.6) 0 0 4px);
  filter: drop-shadow(rgba(255, 247, 192, 0.6) 0 0 4px) drop-shadow(rgba(255, 247, 192, 0.6) 0 0 4px) drop-shadow(rgba(255, 247, 192, 0.6) 0 0 4px);
}
.hok_stbox img {
  display: block;
  height: 100%;
  width: auto;
}

.hok_stbox2 {
  position: relative;
  left: 0;
  top: 0;
  margin: calc(15 / var(--screen-width2) * var(--screen-maxwidth)) auto 0 !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: calc(42 / var(--screen-width2) * var(--screen-maxwidth)) auto 0 !important;
}
.hok_stbox2 a {
  height: calc(60 / var(--screen-width2) * var(--screen-maxwidth)) !important;
}

.hd_store {
  display: block;
  height: calc(60 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 50;
}

.hok_app_store,
.hok_apk_download {
  display: block;
  height: calc(60 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
  z-index: 50;
}

.nv_dn_btn {
  display: none;
}

.hd_nv_list li::after,
.squadbtn:after {
  content: "";
  width: 0;
  border-top: #e7c285 solid 1;
  position: absolute;
  left: 50%;
  bottom: 17.25px;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  -webkit-transition: width 0.5s;
  transition: width 0.5s;
}

.hd_nv_list li.cur,
.hd_nv_list li:hover {
  color: #f7d58c;
}
.hd_nv_list li.cur > a,
.hd_nv_list li:hover > a {
  color: #f7d58c;
}

.hd_nv_list li.cur:before,
.hd_nv_list li:hover:before,
.squadbtn.cur:before,
.squadbtn:hover:before {
  content: "";
  width: 5.25px;
  height: 3px;
  background: url(../img/nv_linec.png) no-repeat 100%/100%;
  position: absolute;
  left: 50%;
  bottom: 15px;
  margin-left: -2.625px;
}

.hd_nv_list li.cur:after,
.hd_nv_list li:hover:after,
.squadbtn.cur:after,
.squadbtn:hover:after {
  content: "";
  width: 61.5px;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 15px;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  border-top: #e7c285 solid 1px;
}

body .hok_stbox a {
  background: #000;
  border: rgba(166, 166, 166, 0.72) solid 0.2vh;
  border-radius: 0.8vh;
  overflow: hidden;
}
body .hok_head .hd_logo {
  width: 50.416vh;
  height: 25.852vh;
  margin-left: -25.208vh;
}
body .hok_head .hok_other_para {
  font-size: 3vh;
}
body .hok_head .hok_other_para {
  top: 62vh;
}
body .hok_head .hok_stbox {
  top: 68.3vh;
}
body .hok_head .hok_stbox.isreglster {
  top: 70.3vh;
}
body .hok_head .hok_stbox.isreglster a {
  height: 5.2vh;
}
body .hok_head .hok_stbox a {
  background: #000;
  height: 8.2vh;
  border: rgba(166, 166, 166, 0.72) solid 0.2vh;
  border-radius: 0.8vh;
  overflow: hidden;
}

.qrcode canvas, .qrcode .cdeimg {
  width: 110px;
  height: 110px;
  position: absolute;
  left: 50%;
  top: 26px;
  transform: translate(-50%, 0);
}

@media screen and (max-width: 1200px) {
  .hov_m_morebox .hd_nv_list li a.nv_camp_btn {
    display: block !important;
    width: calc(270 / var(--screen-width2) * var(--screen-maxwidth)) !important;
    height: calc(62 / var(--screen-width2) * var(--screen-maxwidth)) !important;
    background: url(../img/camp_icon.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 0 0 0 !important;
    float: none !important;
  }
  .hov_m_morebox .hd_nv_list {
    width: 80%;
  }
  .hov_m_morebox .hd_nv_list li {
    border-bottom: rgba(255, 255, 255, 0.2) solid 1px;
  }
  .hd_nv_list li::after, .hd_nv_list li::before {
    display: none !important;
  }
  body.pms .float_kfrk {
    top: calc(130 / var(--screen-width) * var(--screen-maxwidth));
    right: calc(30 / var(--screen-width) * var(--screen-maxwidth));
    z-index: 100;
  }
  body.pms .hok_news_img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
  }
  .nv_rt_mdn {
    display: block;
    width: 36px;
    height: 36px;
    background: url(../img/nav_mdnbtn.png) no-repeat 100%/100%;
    float: right;
    margin: 18px 22.5px 0 0;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
  }
}
@media screen and (max-width: 600px) {
  .hok_head .hok_bot_link.isen a {
    width: 6.4vh;
    height: 6.4vh;
    margin: 0 calc(5 / var(--screen-width) * var(--screen-maxwidth));
  }
  .hd_nv_list li.cur:before,
  .hd_nv_list li:hover:before,
  .squadbtn.cur:before,
  .squadbtn:hover:before {
    display: none !important;
  }
  .hd_nv_list li.cur:after,
  .hd_nv_list li:hover:after,
  .squadbtn.cur:after,
  .squadbtn:hover:after {
    display: none !important;
  }
  body .nv_dn_btn {
    margin: calc(40 / var(--screen-width2) * var(--screen-maxwidth)) calc(40 / var(--screen-width2) * var(--screen-maxwidth)) 0 0;
  }
  body .nv_camp_btn {
    display: block;
    width: calc(200 / var(--screen-width2) * var(--screen-maxwidth));
    height: calc(44 / var(--screen-width2) * var(--screen-maxwidth));
    background: url(../img/camp_icon.png) no-repeat;
    background-size: 100% 100%;
    margin-right: calc(22 / var(--screen-width2) * var(--screen-maxwidth));
    margin-top: calc(40 / var(--screen-width2) * var(--screen-maxwidth));
    float: right;
  }
  body.lang_cn *[lang-block=onlycn] {
    display: none !important;
  }
  body .compra_icon {
    display: inline-block;
    vertical-align: top;
    width: calc(40 / var(--screen-width2) * var(--screen-maxwidth));
    height: calc(40 / var(--screen-width2) * var(--screen-maxwidth));
    background: url(../img/compra_icon.png) no-repeat 100%/100%;
  }
  body .compra_btn {
    float: right;
    font-size: calc(18 / var(--screen-width2) * var(--screen-maxwidth));
    color: #b7b7b7;
    line-height: calc(40 / var(--screen-width2) * var(--screen-maxwidth));
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
  }
  body .nv_camp_btn {
    display: none !important;
  }
  body .hov_m_morebox .hd_nv_list li {
    display: flex !important;
  }
  body .hov_m_morebox .hd_nv_list li a.nv_camp_btn {
    display: block !important;
    width: calc(270 / var(--screen-width2) * var(--screen-maxwidth));
    height: calc(62 / var(--screen-width2) * var(--screen-maxwidth));
    background: url(../img/camp_icon.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 0 0 0;
    float: none;
  }
  body.lang_ms .nv_dn_btn {
    font-size: calc(14 / var(--screen-width2) * var(--screen-maxwidth));
    white-space: nowrap;
  }
  body.lang_id .nv_dn_btn {
    font-size: calc(18 / var(--screen-width2) * var(--screen-maxwidth));
    white-space: nowrap;
  }
  .nv_rt_mdn {
    display: block;
    width: calc(48 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(48 / var(--screen-width) * var(--screen-maxwidth));
    background: url(../img/nav_mdnbtn.png) no-repeat 100%/100%;
    float: right;
    margin: calc(35 / var(--screen-width) * var(--screen-maxwidth)) calc(40 / var(--screen-width) * var(--screen-maxwidth)) 0 0;
  }
  .compra_btn {
    margin: calc(40 / var(--screen-width) * var(--screen-maxwidth)) calc(40 / var(--screen-width) * var(--screen-maxwidth)) 0 0;
  }
}
.isvideo {
  position: relative;
}
.isvideo:before {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
}
.isvideo:after {
  content: "";
  width: calc(124 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(124 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/newpage/cvtype_icon.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
}

#orientLayer {
  display: none;
  z-index: 999999;
}

@media screen and (orientation: landscape) {
  .pms #orientLayer {
    display: block;
  }
  .pms .hero_change_box2 {
    display: none !important;
  }
}

.mod-orient-layer {
  display: none;
  position: fixed;
  height: 100%;
  width: 100%;
  left: 50%;
  top: 50%;
  background: #000;
  z-index: 9997;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.mod-orient-layer__content {
  position: absolute;
  width: 100%;
  top: 50%;
  margin-top: -75px;
  text-align: center;
}

.mod-orient-layer__icon-orient {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIYAAADaCAMAAABU68ovAAAAXVBMVEUAAAD29vb////x8fH////////x8fH5+fn29vby8vL////5+fn39/f6+vr////x8fH////////+/v7////09PT////x8fH39/f////////////////////x8fH///+WLTLGAAAAHXRSTlMAIpML+gb4ZhHWn1c2gvHBvq1uKJcC6k8b187lQ9yhhboAAAQYSURBVHja7d3blpowFIDhTUIAOchZDkre/zE7ycySrbUUpsRN2/1fzO18KzEqxEVgTiZNfgmmtxRc8iaR8HNe8x4BtjQePKayYCIoyBSgvNNE1AkNSHqZyLqk97EgUCCHBzZ5mkg7ScvIJuIyOyXBRFxgpqWZyGsAZLB1KjsJi8nutHU4JCRbFRH8tmirI9k8Jx2sqNs8K/m0LQkrktO2crgcgXGB4AiTEsB0hJfo9MGgX7CGcYiYwQxmMOOvZwRhBG8tCoMXjBDeXvWCEcHbi14wgCBmMIMZzGAGM5jxETNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxY6E2rUQxnH2tz9cirlJFwFBJedaPnUv0M7++egPDE8iAJcIDmxwH5wwv9vUviw2kLbVO3TJU5uul/EyB0FoLp4x60PdGUd3qPurrWyjGGTc05u+1dcgI7/+tCCPARWGhH7o5Y7RCf+bH9ctXLp6v2BVDxfqz0oPXeSVaNtINo/1SXDv4dck8IIkbhtC2ol+iouEonTBCbYvVMnXOjxww6s/RFrBUpXHh/gw1rHj5d/qhYn9Gpk2FWh6xRBRX5Oj3Znh2Sq49/L6+y8pB26q9GbE2dbA2mVbx6I+7MfBglLCttm73ZQi7AD3iL4HqjFYJHSPRppqaUaJ3ATpGa+ckpGak2hRRMyqjGMkvl+xyFeSMwjAqcsZgGDdyhl0oNTnDN4yenJGZFGxNChP5/Y3efh6SM2rDOJMzboYxkDMqwyjIGcIw6F+io2FU1IxIm1JqRmgXSkvNKNCXeTpGrU0JNSO2c6LIGPgCS8AuDHz9ta0SXWDtxoDRH+MqlbC2Dt2G2JFRadtQZt2qq/orGowdGb2euxYiqWEpVWhTBnszoNAPdStuQwxqf0aocdWKW4Z+DfszIh8pxJqbuCE4YAC+4bm0evtipjpgJHeFnyyt1Ku2xa0bhjxr27p75rECNwyI9ZwvXkHq+7aTaMEV44YYy/spfgjgjNHaWW+GeUhGEX7tLlVinIFDDSgnOwhi1V6bU0b6tVS9eAERe863g4dRrtiHdc6o+nn5vtyVVgR79Cqt4uL6gfHPQyGqtP2vf7HADGbcYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JjhtOM+J/AgT008yDMkN/dPP9hzS8zAMQN3OEYeekp5YU7KOKXwVXqiY+QS7smcinGKABWdiBgpPJTSMHJ4KidhhPBUSMLw4CmPhKHgKUXCkHsygum71ftNSgCX6bsl8FQyfbcL5EdYsDk0R3j7aiA5wpt5AjKg/2gLJEBD/0Hf2OOf/vRrj6z/7GtP4B3nMKyjHA12kIPSjnJs3FEO0TvKkYJHOWCR+rjJH0Vn6fI5PjNbAAAAAElFTkSuQmCC);
  display: inline-block;
  width: 67px;
  height: 109px;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -webkit-animation: rotation infinite 1.5s ease-in-out;
  animation: rotation infinite 1.5s ease-in-out;
  background-size: 67px;
}

.mod-orient-layer__desc {
  margin-top: 20px;
  font-size: 15px;
  color: #fff;
}

@-webkit-keyframes rotation {
  10% {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
  }
  50%, 60% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  90% {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
  }
  100% {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
  }
}
@keyframes rotation {
  10% {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
  }
  50%, 60% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  90% {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
  }
  100% {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
  }
}
body {
  font: calc(12 / var(--screen-width) * var(--screen-maxwidth))/1.5 tahoma, "u65b9u6b63u5170u4eadu9ed1", sans-serif;
  background: #000;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}

em,
b {
  font-style: normal;
}

a {
  text-decoration: none;
  -webkit-filter: brightness(100%);
  filter: brightness(100%);
}

a:hover {
  text-decoration: none;
  -webkit-filter: brightness(120%);
  filter: brightness(120%);
}

.ibgt {
  pointer-events: none !important;
}

img {
  border: 0;
}

button,
input,
select,
textarea {
  font-size: 100%;
  outline: none;
}

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

td,
th,
ul,
ol {
  padding: 0;
  list-style-type: none;
}

span {
  outline: none !important;
}

.clearfix:after {
  content: " ";
  height: 0;
  display: block;
  clear: both;
}

.hidden {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

*[lang-block=onlycn],
*[lang-block=onlybr],
*[lang-flex=onlybr],
*[lang-block=onlyen],
*[lang-inline-block=onlyen],
*[lang-flex=onlyen],
*[lang-block="br&en"] {
  display: none !important;
}

.lang_ar *[lang-arnone="1"] {
  display: none !important;
}

.lang_en *[lang-ennone="1"] {
  display: none !important;
}

.lang_br *[lang-brnone="1"] {
  display: none !important;
}

.lang_ru *[lang-runone="1"] {
  display: none !important;
}

.lang_cn *[lang-cnnone="1"] {
  display: none !important;
}
.lang_cn *[lang-block=onlycn] {
  display: block !important;
}

.lang_tw *[lang-twnone="1"] {
  display: none !important;
}

.lang_es *[lang-esnone="1"] {
  display: none !important;
}

.lang_tr *[lang-trnone="1"] {
  display: none !important;
}

.lang_id *[lang-idnone="1"] {
  display: none !important;
}

.lang_ms *[lang-msnone="1"] {
  display: none !important;
}

*[lang-flex=otherbr] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

*[lang-block=otherbr] {
  display: block;
}

.lang_br *[lang-block=onlybr] {
  display: block !important;
}
.lang_br *[lang-flex=onlybr] {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}
.lang_br *[lang-flex=otherbr] {
  display: none !important;
}
.lang_br *[lang-block=otherbr] {
  display: none !important;
}

.lang_en *[lang-block=onlyen] {
  display: block !important;
}
.lang_en *[lang-flex=onlyen] {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.lang_en:not(.lang_ms, .lang_id) *[lang-inline-block=onlyen] {
  display: inline-block !important;
}

.lang_en *[lang-block="br&en"], .lang_br *[lang-block="br&en"] {
  display: block !important;
}

.wrap {
  width: 100%;
  /*max-width: 1920px;*/
  /*min-width: calc(1000 / var(--screen-width) * var(--screen-maxwidth));*/
  position: relative;
  overflow: hidden;
  background: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
}

.hok_part {
  /*max-width: 1920px;*/
  margin: 0 auto;
}

.hok_part1 {
  width: 100%;
  height: auto;
  z-index: 30;
  position: relative;
}

.wel_logo_plot {
  display: block;
  width: 70.5vh;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 26.2vh;
  margin-left: -35.75vh;
  font-size: 2.8vh;
  color: #e4bf7f;
  letter-spacing: 1vh;
  line-height: 4vh;
}
.wel_logo_plot i {
  font-style: normal;
  font-weight: bold;
}

@media screen and (max-width: 900px) {
  .lang_ru .nv_more_btn.more_btn span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    padding-top: 0;
  }
}
.pc_hh {
  display: block;
  width: 100%;
}

.facebook_lit {
  background: url(../img/facebook.png) no-repeat;
  background-size: 100% 100%;
}

.twitter_lit {
  background: url(../img/twitter.png) no-repeat;
  background-size: 100% 100%;
}

.youtube_lit {
  background: url(../img/youtube.png) no-repeat;
  background-size: 100% 100%;
}

.instagram_lit {
  background: url(../img/instagram.png) no-repeat;
  background-size: 100% 100%;
}

.tiktok_lit {
  background: url(../img/tiktok.png) no-repeat;
  background-size: 100% 100%;
}

.apple_lit {
  background: url(../img/apple.png) no-repeat;
  background-size: 100% 100%;
}

.vk_lit {
  background: url(../img/vk.png) no-repeat;
  background-size: 100% 100%;
}

.twitch_lit {
  background: url(../img/twitch.png) no-repeat;
  background-size: 100% 100%;
}

.lipass_lit {
  background: url(../img/lipass.png) no-repeat;
  background-size: 100% 100%;
}

.kwai_lit {
  background: url(../img/kwai.png) no-repeat;
  background-size: 100% 100%;
}

.wechat_lit {
  background: url(../img/wechat.png) no-repeat;
  background-size: 100% 100%;
}

.google_lit {
  background: url(../img/google.png) no-repeat;
  background-size: 100% 100%;
}

.discord_lit {
  background: url(../img/discord.png) no-repeat;
  background-size: 100% 100%;
}

.email_lit {
  background: url(../img/email.png) no-repeat;
  background-size: 100% 100%;
}

.whatsapp_lit {
  background: url(../img/whatsapp.png) no-repeat;
  background-size: 100% 100%;
}

.threads_lit {
  background: url(../img/threads.png) no-repeat;
  background-size: 100% 100%;
}

.telegram_lit {
  background: url(../img/telegram.png) no-repeat;
  background-size: 100% 100%;
}

.nvsm_box .facebook_lit:hover {
  background: url(../img/facebook_y.png) no-repeat;
  background-size: 100% 100%;
}
.nvsm_box .twitter_lit:hover {
  background: url(../img/twitter_y.png) no-repeat;
  background-size: 100% 100%;
}
.nvsm_box .youtube_lit:hover {
  background: url(../img/youtube_y.png) no-repeat;
  background-size: 100% 100%;
}
.nvsm_box .instagram_lit:hover {
  background: url(../img/instagram_y.png) no-repeat;
  background-size: 100% 100%;
}
.nvsm_box .tiktok_lit:hover {
  background: url(../img/tiktok_y.png) no-repeat;
  background-size: 100% 100%;
}
.nvsm_box .apple_lit:hover {
  background: url(../img/apple_y.png) no-repeat;
  background-size: 100% 100%;
}
.nvsm_box .vk_lit:hover {
  background: url(../img/vk_y.png) no-repeat;
  background-size: 100% 100%;
}
.nvsm_box .twitch_lit:hover {
  background: url(../img/twitch_y.png) no-repeat;
  background-size: 100% 100%;
}
.nvsm_box .lipass_lit:hover {
  background: url(../img/lipass_y.png) no-repeat;
  background-size: 100% 100%;
}
.nvsm_box .kwai_lit:hover {
  background: url(../img/kwai_y.png) no-repeat;
  background-size: 100% 100%;
}
.nvsm_box .wechat_lit:hover {
  background: url(../img/wechat_y.png) no-repeat;
  background-size: 100% 100%;
}
.nvsm_box .google_lit:hover {
  background: url(../img/google_y.png) no-repeat;
  background-size: 100% 100%;
}
.nvsm_box .discord_lit:hover {
  background: url(../img/discord_y.png) no-repeat;
  background-size: 100% 100%;
}
.nvsm_box .email_lit:hover {
  background: url(../img/email_y.png) no-repeat;
  background-size: 100% 100%;
}
.nvsm_box .whatsapp_lit:hover {
  background: url(../img/whatsapp_y.png) no-repeat;
  background-size: 100% 100%;
}
.nvsm_box .threads_lit:hover {
  background: url(../img/threads_y.png) no-repeat;
  background-size: 100% 100%;
}
.nvsm_box .telegram_lit:hover {
  background: url(../img/telegram_y.png) no-repeat;
  background-size: 100% 100%;
}

.lang_cn .nvsm_box, .lang_cn .hok_store_btnbox, .lang_cn .hok_bot_link {
  visibility: hidden;
}
.lang_cn .nvsm_box {
  display: none;
}

.nvsm_box {
  float: left;
}

.hok_head {
  width: 100%;
  height: 95vh;
  position: relative;
  z-index: 20;
}

.hok_headbg {
  width: 100%;
  height: 100%;
  background-image: url(../img/head_bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  -webkit-mask-image: url(../img/head_mask.png);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  position: relative;
  z-index: 5;
}
.fallback .hok_headbg {
  background-image: url("../img/head_bg.jpg");
}
.webp .hok_headbg {
  background-image: url("../img/head_bg.webp");
}
.avif .hok_headbg {
  background-image: url("../img/head_bg.avif");
}
.hok_headbg:after {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 50;
}
.hok_headbg canvas {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
}

.hok_vidbg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}

/*.hok_linebox{
	width: calc(518 / var(--screen-width) * var(--screen-maxwidth));
	height: calc(45 / var(--screen-width) * var(--screen-maxwidth));
	position: absolute;
	left: 50%;
	bottom: calc(-12 / var(--screen-width) * var(--screen-maxwidth));
	margin-left: calc(-259 / var(--screen-width) * var(--screen-maxwidth));
	z-index: 30;
}*/
.hok_linebox {
  width: 100%;
  height: calc(38 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  background: url(../img/hd_jtline.png) no-repeat center;
  background-size: calc(1006 / var(--screen-width) * var(--screen-maxwidth)) auto;
  left: 0;
  bottom: 1.2vh;
  z-index: 100;
  -webkit-animation: hok_lineboxin 2s linear infinite;
  animation: hok_lineboxin 2s linear infinite;
}

.hok_lineboxin {
  width: calc(82 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(32 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/hd_jtline_in.png) no-repeat 100%/100%;
  position: absolute;
  left: 50%;
  top: calc(6 / var(--screen-width) * var(--screen-maxwidth));
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

@-webkit-keyframes hok_lineboxin {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, calc(-10 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-10 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, calc(10 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(10 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes hok_lineboxin {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, calc(-10 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-10 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, calc(10 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(10 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@-webkit-keyframes line {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
@keyframes line {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
@-webkit-keyframes line2 {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
@keyframes line2 {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
.nv_camp_btn {
  display: block;
  width: 160px;
  height: 35.2px;
  background: url(../img/camp_icon.png) no-repeat;
  background-size: 100% 100%;
  margin-right: 12px;
  margin-top: 16px;
  float: right;
}

.hd_logo {
  display: block;
  width: 54.8vh;
  height: 28.1vh;
  background: url(../img/logo.png) no-repeat 100%/100%;
  position: absolute;
  left: 50%;
  top: 28vh;
  margin-left: -27.4vh;
  z-index: 30;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.hd_logo:hover {
  -webkit-filter: brightness(1);
  filter: brightness(1);
}

.hd_btnbox {
  width: 100%;
  position: absolute;
  left: 0;
  top: 62.2vh;
  text-align: center;
  font-size: 0;
  z-index: 30;
  font-weight: bold;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: flex;
}
.hd_btnbox a {
  display: block;
  width: 22.7vh;
  height: 5.1vh;
  font-size: 1.6vh;
  color: #ffffff;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  margin: 0 2vh 2.2vh;
  line-height: 5.1vh;
  position: relative;
  text-transform: uppercase;
}
.hd_btnbox a .ibgt {
  display: block;
  width: 22.9vh;
  height: 5.1vh;
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.hd_btnbox a span {
  color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 20;
  width: 200%;
  height: 10.2vh;
  /* line-height: 9.6vh; */
  font-size: 3.2vh;
  line-height: 3vh;
  -webkit-transform: scale(0.5) translate(-100%, -50%);
  transform: scale(0.5) translate(-100%, -50%);
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: normal;
  -webkit-filter: none !important;
  filter: none !important;
}
.hd_btnbox a:hover .ibgt {
  width: 24.3vh;
  height: 4.8vh;
  background: url(../img/empty_btn_hover.png) no-repeat 100%/100%;
}
.hd_btnbox a:hover.godrd .ibgt {
  width: 28vh;
  height: 9vh;
  background-image: url("../img/hdjoinbtn.png");
  background-size: 196vh 162vh;
  background-repeat: no-repeat;
  -webkit-animation-name: hdjoinbtn;
  animation-name: hdjoinbtn;
  -webkit-animation-duration: 4.36s;
  animation-duration: 4.36s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: steps(1);
  animation-timing-function: steps(1);
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.hd_btnbox a .ibgt {
  background: url(../img/empty_btn.png) no-repeat 100%/100%;
}
.hd_btnbox a.godrd .ibgt {
  width: 28vh;
  height: 9vh;
  background-image: url("../img/hdjoinbtn.png");
  background-size: 196vh 162vh;
  background-position: 0 0;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.hd_btnbox a:hover {
  -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.5) 0 0 5px) brightness(1);
  filter: drop-shadow(rgba(0, 0, 0, 0.5) 0 0 5px) brightness(1);
}
.hd_btnbox a p {
  text-align: center;
  position: absolute;
  left: 50%;
  bottom: -7.8vh;
  font-size: 2.4vh;
  letter-spacing: 0.3vh;
  color: #ffffff;
  white-space: nowrap;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  pointer-events: none;
}
.lang_es .hd_btnbox a.godrd span,
.lang_ru .hd_btnbox a.godrd span {
  /*line-height: 3.6vh;
  padding-top: 1.1vh;*/
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
}

.lang_ru .hd_btnbox a.godrd span {
  line-height: 1.2;
}

.lang_ar .hd_btnbox a.dga .ibgt {
  width: 42.6vh;
  height: 12.2vh;
  background-image: url("../img/longbtn.png");
  background-size: 298.2vh 244vh;
  background-position: 0 0;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.lang_ar .hd_btnbox a.dga span {
  width: 79.6vh;
  -webkit-transform: scale(0.5) translate(-79.6vh, -50%);
  transform: scale(0.5) translate(-79.6vh, -50%);
  font-size: 3.8vh;
}

.lang_ar .hd_btnbox a.dga:hover .ibgt {
  width: 42.6vh;
  height: 12.2vh;
  background-image: url("../img/longbtn.png");
  background-size: 298.2vh 244vh;
  background-repeat: no-repeat;
  -webkit-animation-name: hdjoinbtn2;
  animation-name: hdjoinbtn2;
  -webkit-animation-duration: 4.92s;
  animation-duration: 4.92s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: steps(1);
  animation-timing-function: steps(1);
}

.hd_btnbox.otherlan {
  display: block !important;
  top: 68.2vh;
}

.lang_en .hd_btnbox.otherlan {
  display: none !important;
}

.isen {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.hok_head .not_test {
  display: none;
}
.hok_head .not_test .hd_btnbox {
  top: 58vh;
}
.hok_head .not_test .hok_alpha_test {
  font-size: 2.4vh;
  top: 70vh;
}

.news_read_more {
  display: block;
  width: calc(268 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(58 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/read_more2.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  top: calc(304 / var(--screen-width) * var(--screen-maxwidth));
  margin-left: calc(-864 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 40;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.news_read_more span {
  display: block;
  width: 100%;
  height: 100%;
  font-size: calc(28 / var(--screen-width) * var(--screen-maxwidth));
  color: #fef7db;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.news_read_more:hover {
  width: calc(287 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/read_more2_hov.png) no-repeat;
  background-size: 100% 100%;
}

.lang_tr .news_read_more {
  width: calc(328 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/read_more3.png) no-repeat;
  background-size: 100% 100%;
}
.lang_tr .news_read_more:hover {
  width: calc(347 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/read_more3_hov.png) no-repeat;
  background-size: 100% 100%;
}

.hd_btnbox a.hd_alphabtn {
  -webkit-filter: none;
  filter: none;
}
.hd_btnbox a.hd_alphabtn:hover {
  -webkit-filter: brightness(0.9);
  filter: brightness(0.9);
}

.hd_btnbox a.hd_alphabtn .ibgt {
  width: 42.6vh;
  height: 12.2vh;
  background: none;
  pointer-events: none;
  margin-top: -6.1vh;
  top: 50%;
}

.hd_btnbox a.hd_alphabtn .ibgt::before {
  display: block;
  content: "";
  width: 100%;
  height: 0;
  background-image: url("../img/longbtn.png");
  background-size: 298.2vh 244vh;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.hd_btnbox a.hd_alphabtn .ibgt::before {
  width: 42.6vh;
  height: 12.2vh;
  background-image: url("../img/longbtn.png");
  background-size: 298.2vh 244vh;
  background-repeat: no-repeat;
  -webkit-animation-name: hdjoinbtn2;
  animation-name: hdjoinbtn2;
  -webkit-animation-duration: 4.92s;
  animation-duration: 4.92s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: steps(1);
  animation-timing-function: steps(1);
}

@-webkit-keyframes ani-hd-alphabtn {
  11.48% {
    background-position: 25% 25%;
  }
  13.11% {
    background-position: 0% 33.3333333333%;
  }
  14.75% {
    background-position: 25% 33.3333333333%;
  }
  16.39% {
    background-position: 0% 41.6666666667%;
  }
  18.03% {
    background-position: 25% 41.6666666667%;
  }
  19.67% {
    background-position: 50% 0%;
  }
  21.31% {
    background-position: 50% 8.3333333333%;
  }
  22.95% {
    background-position: 50% 16.6666666667%;
  }
  24.59% {
    background-position: 50% 25%;
  }
  26.23% {
    background-position: 50% 33.3333333333%;
  }
  27.87% {
    background-position: 50% 41.6666666667%;
  }
  29.51% {
    background-position: 0% 50%;
  }
  31.15% {
    background-position: 25% 50%;
  }
  32.79% {
    background-position: 50% 50%;
  }
  34.43% {
    background-position: 0% 58.3333333333%;
  }
  36.07% {
    background-position: 25% 58.3333333333%;
  }
  37.70% {
    background-position: 50% 58.3333333333%;
  }
  39.34% {
    background-position: 0% 66.6666666667%;
  }
  40.98% {
    background-position: 25% 66.6666666667%;
  }
  42.62% {
    background-position: 50% 66.6666666667%;
  }
  44.26% {
    background-position: 0% 75%;
  }
  45.90% {
    background-position: 25% 75%;
  }
  47.54% {
    background-position: 50% 75%;
  }
  49.18% {
    background-position: 75% 0%;
  }
  50.82% {
    background-position: 75% 8.3333333333%;
  }
  52.46% {
    background-position: 75% 16.6666666667%;
  }
  54.10% {
    background-position: 75% 25%;
  }
  55.74% {
    background-position: 75% 33.3333333333%;
  }
  57.38% {
    background-position: 75% 41.6666666667%;
  }
  59.02% {
    background-position: 75% 50%;
  }
  60.66% {
    background-position: 75% 58.3333333333%;
  }
  62.30% {
    background-position: 75% 66.6666666667%;
  }
  63.93% {
    background-position: 75% 75%;
  }
  65.57% {
    background-position: 0% 83.3333333333%;
  }
  67.21% {
    background-position: 25% 83.3333333333%;
  }
  68.85% {
    background-position: 50% 83.3333333333%;
  }
  70.49% {
    background-position: 75% 83.3333333333%;
  }
  72.13% {
    background-position: 0% 91.6666666667%;
  }
  73.77% {
    background-position: 25% 91.6666666667%;
  }
  75.41% {
    background-position: 50% 91.6666666667%;
  }
  77.05% {
    background-position: 75% 91.6666666667%;
  }
  78.69% {
    background-position: 0% 100%;
  }
  80.33% {
    background-position: 25% 100%;
  }
  81.97% {
    background-position: 50% 100%;
  }
  83.61% {
    background-position: 75% 100%;
  }
  85.25% {
    background-position: 100% 0%;
  }
  86.89% {
    background-position: 100% 8.3333333333%;
  }
  88.52% {
    background-position: 100% 16.6666666667%;
  }
  90.16% {
    background-position: 100% 25%;
  }
  91.80% {
    background-position: 100% 33.3333333333%;
  }
  93.44% {
    background-position: 100% 41.6666666667%;
  }
  95.08% {
    background-position: 100% 50%;
  }
  96.72% {
    background-position: 100% 58.3333333333%;
  }
  98.36%, 100% {
    background-position: 100% 66.6666666667%;
  }
}
@keyframes ani-hd-alphabtn {
  11.48% {
    background-position: 25% 25%;
  }
  13.11% {
    background-position: 0% 33.3333333333%;
  }
  14.75% {
    background-position: 25% 33.3333333333%;
  }
  16.39% {
    background-position: 0% 41.6666666667%;
  }
  18.03% {
    background-position: 25% 41.6666666667%;
  }
  19.67% {
    background-position: 50% 0%;
  }
  21.31% {
    background-position: 50% 8.3333333333%;
  }
  22.95% {
    background-position: 50% 16.6666666667%;
  }
  24.59% {
    background-position: 50% 25%;
  }
  26.23% {
    background-position: 50% 33.3333333333%;
  }
  27.87% {
    background-position: 50% 41.6666666667%;
  }
  29.51% {
    background-position: 0% 50%;
  }
  31.15% {
    background-position: 25% 50%;
  }
  32.79% {
    background-position: 50% 50%;
  }
  34.43% {
    background-position: 0% 58.3333333333%;
  }
  36.07% {
    background-position: 25% 58.3333333333%;
  }
  37.70% {
    background-position: 50% 58.3333333333%;
  }
  39.34% {
    background-position: 0% 66.6666666667%;
  }
  40.98% {
    background-position: 25% 66.6666666667%;
  }
  42.62% {
    background-position: 50% 66.6666666667%;
  }
  44.26% {
    background-position: 0% 75%;
  }
  45.90% {
    background-position: 25% 75%;
  }
  47.54% {
    background-position: 50% 75%;
  }
  49.18% {
    background-position: 75% 0%;
  }
  50.82% {
    background-position: 75% 8.3333333333%;
  }
  52.46% {
    background-position: 75% 16.6666666667%;
  }
  54.10% {
    background-position: 75% 25%;
  }
  55.74% {
    background-position: 75% 33.3333333333%;
  }
  57.38% {
    background-position: 75% 41.6666666667%;
  }
  59.02% {
    background-position: 75% 50%;
  }
  60.66% {
    background-position: 75% 58.3333333333%;
  }
  62.30% {
    background-position: 75% 66.6666666667%;
  }
  63.93% {
    background-position: 75% 75%;
  }
  65.57% {
    background-position: 0% 83.3333333333%;
  }
  67.21% {
    background-position: 25% 83.3333333333%;
  }
  68.85% {
    background-position: 50% 83.3333333333%;
  }
  70.49% {
    background-position: 75% 83.3333333333%;
  }
  72.13% {
    background-position: 0% 91.6666666667%;
  }
  73.77% {
    background-position: 25% 91.6666666667%;
  }
  75.41% {
    background-position: 50% 91.6666666667%;
  }
  77.05% {
    background-position: 75% 91.6666666667%;
  }
  78.69% {
    background-position: 0% 100%;
  }
  80.33% {
    background-position: 25% 100%;
  }
  81.97% {
    background-position: 50% 100%;
  }
  83.61% {
    background-position: 75% 100%;
  }
  85.25% {
    background-position: 100% 0%;
  }
  86.89% {
    background-position: 100% 8.3333333333%;
  }
  88.52% {
    background-position: 100% 16.6666666667%;
  }
  90.16% {
    background-position: 100% 25%;
  }
  91.80% {
    background-position: 100% 33.3333333333%;
  }
  93.44% {
    background-position: 100% 41.6666666667%;
  }
  95.08% {
    background-position: 100% 50%;
  }
  96.72% {
    background-position: 100% 58.3333333333%;
  }
  98.36%, 100% {
    background-position: 100% 66.6666666667%;
  }
}
.hd_btnbox a.hd_aboutbtn .ibgt {
  /* width: calc(384 / var(--screen-width) * var(--screen-maxwidth)) !important; */
  width: 38.4vh;
  /* height: calc(50 / var(--screen-width) * var(--screen-maxwidth)) !important; */
  height: 5vh;
  background: url(../img/hd_aboutbtn.png) no-repeat center top/100%;
}

.hd_btnbox a.hd_aboutbtn:hover .ibgt {
  width: 40.4vh;
  background: url(../img/hd_aboutbtn_hover.png) no-repeat center top/100%;
}

.hd_btnbox.isen a.hd_aboutbtn .ibgt {
  width: 22.7vh;
  height: 5vh;
  background: url(../img/empty_btn.png) no-repeat center top/100%;
}

.hd_btnbox.isen a.hd_aboutbtn:hover .ibgt {
  width: 24.3vh;
  background: url(../img/empty_btn_hover.png) no-repeat center top/100%;
}

.hd_btnbox a.hd_abtnoten {
  display: none !important;
}

.lang_en .hd_btnbox a.hd_abtnoten {
  display: block !important;
}

@-webkit-keyframes btns {
  0% {
    background: url(../img/hd_joinbtn.png) no-repeat 100%/100%;
  }
  50% {
    background: url(../img/hd_joinbtn_cur.png) no-repeat 100%/100%;
  }
  100% {
    background: none;
  }
}
@keyframes btns {
  0% {
    background: url(../img/hd_joinbtn.png) no-repeat 100%/100%;
  }
  50% {
    background: url(../img/hd_joinbtn_cur.png) no-repeat 100%/100%;
  }
  100% {
    background: none;
  }
}
.hok_news {
  background: url(../img/bg1.jpg) no-repeat top center #fff;
  background-size: 100% auto;
  position: relative;
  padding-top: calc(120 / var(--screen-width) * var(--screen-maxwidth));
  padding-bottom: calc(84 / var(--screen-width) * var(--screen-maxwidth));
  margin-top: calc(-78 / var(--screen-width) * var(--screen-maxwidth));
}
.hok_news.animate .hok_news_tit {
  -webkit-animation: wzs 1s 1 both;
  animation: wzs 1s 1 both;
}
.hok_news.animate .hok_new_det {
  -webkit-animation: wzs 1s 0.2s 1 both;
  animation: wzs 1s 0.2s 1 both;
}
.hok_news.animate .hok_news_para {
  -webkit-animation: wzs 1s 0.5s 1 both;
  animation: wzs 1s 0.5s 1 both;
}
.hok_news.animate .hok_news_list li {
  -webkit-animation: wzs 1s 0.7s 1 both;
  animation: wzs 1s 0.7s 1 both;
}

@-webkit-keyframes wzs {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, calc(50 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(50 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes wzs {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, calc(50 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(50 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
.hok_news_tit {
  opacity: 0;
  display: block;
  width: 100%;
  text-align: center;
  height: calc(88 / var(--screen-width) * var(--screen-maxwidth));
  font-size: calc(70 / var(--screen-width) * var(--screen-maxwidth));
  line-height: calc(70 / var(--screen-width) * var(--screen-maxwidth));
  color: #75521c;
  font-weight: normal;
  position: relative;
}
.lang_ja .hok_news_tit {
  font-size: calc(52 / var(--screen-width) * var(--screen-maxwidth));
}

.hok_news_tit span {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#8d560d), to(#ad7e2b));
  background-image: linear-gradient(#8d560d, #ad7e2b);
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: block;
}
.hok_news_tit:after {
  content: "";
  width: calc(434 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/tit_line3.png) no-repeat 100%/100%;
  position: absolute;
  left: 50%;
  bottom: calc(-8 / var(--screen-width) * var(--screen-maxwidth));
  margin-left: calc(-217 / var(--screen-width) * var(--screen-maxwidth));
}

.hok_new_det {
  opacity: 0;
  width: 100%;
  height: calc(420 / var(--screen-width) * var(--screen-maxwidth));
  margin: calc(70 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
  position: relative;
  border-top: #dca241 solid 2px;
  border-bottom: #dca241 solid 2px;
}
.hok_new_det .hd_news_bg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.hok_new_det .hd_news_bg a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.hok_new_det .hd_news_bg a:hover {
  -webkit-filter: brightness(1);
  filter: brightness(1);
}
.hok_new_det img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
  /*margin-left: calc(-960 / var(--screen-width) * var(--screen-maxwidth));*/
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -o-object-fit: cover;
  object-fit: cover;
}
.hok_new_det:hover img {
  -webkit-transform: translate(-50%, 0) scale(1.02);
  transform: translate(-50%, 0) scale(1.02);
}
.hok_new_det .hok_news_line {
  display: block;
  width: calc(100% - 70 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(461 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: calc(35 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(-20 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 30;
  pointer-events: none;
  background: url(../img/news_line.png) no-repeat 100%/100%;
  background-size: 100% 100%;
}
.hok_new_det .hok_news_linelx {
  width: calc(12 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(12 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/lx_iconn2.png) no-repeat 100%/100%;
  position: absolute;
  left: calc(50 / var(--screen-width) * var(--screen-maxwidth));
  bottom: calc(-5 / var(--screen-width) * var(--screen-maxwidth));
}
.hok_new_det .hok_news_linelx2 {
  width: calc(12 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(12 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/lx_iconn.png) no-repeat 100%/100%;
  position: absolute;
  right: calc(272 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(-5 / var(--screen-width) * var(--screen-maxwidth));
}

.hok_news_para {
  display: block;
  width: calc(1920 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(420 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/new_text.png) no-repeat 100%/100%;
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 20;
  margin-left: calc(-960 / var(--screen-width) * var(--screen-maxwidth));
  pointer-events: none;
}
.hok_news_para_en {
  background: url(../img/news_img_en.png) no-repeat 100%/100%;
}
.hok_news_para_tr {
  background: url(../img/news_img_tr.png) no-repeat 100%/100%;
}
.hok_news_para_latam {
  background: url(../img/news_img_latam.png) no-repeat 100%/100%;
}
.hok_news_para_mena {
  background: url(../img/news_img_mana.png) no-repeat 100%/100%;
}
.hok_news_para_br {
  background: url(../img/news_img_br.png) no-repeat 100%/100%;
}

.hok_news_list {
  width: 100%;
  text-align: center;
  font-size: 0;
  margin: calc(58 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
}
.hok_news_list li {
  display: inline-block;
  vertical-align: top;
  width: calc(386 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(370 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
  margin: 0 calc(26 / var(--screen-width) * var(--screen-maxwidth));
}
.hok_news_list li a {
  display: block;
  width: 100%;
  height: calc(295 / var(--screen-width) * var(--screen-maxwidth));
}
.hok_news_list li .news_img_line {
  width: 100%;
  height: 100%;
  background: url(../img/news_kk.png) no-repeat;
  background-size: 100% auto;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
}
.hok_news_list li:hover .hok_news_img {
  -webkit-mask-image: url(../img/news_mask.png);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
}
.hok_news_list li:hover .hok_news_img img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.hok_news_list li:hover .hok_news_img .news_imgin {
  width: 100%;
}
.hok_news_list li:hover .news_img_line {
  background: url(../img/news_kk_hov.png) no-repeat;
  background-size: 100% auto;
}

.news_imgin {
  width: calc(387 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(212 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
  z-index: 0;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.hok_news_img {
  width: calc(387 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(295 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
}
.hok_news_img img {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -o-object-fit: cover;
  object-fit: cover;
}

.hok_news_des {
  width: 100%;
  font-size: calc(20 / var(--screen-width) * var(--screen-maxwidth));
  line-height: calc(24 / var(--screen-width) * var(--screen-maxwidth));
  color: #ffffff;
  margin: calc(6 / var(--screen-width) * var(--screen-maxwidth)) 0 0 0;
  text-align: left;
  letter-spacing: calc(1.5 / var(--screen-width) * var(--screen-maxwidth));
  padding: 0 calc(10 / var(--screen-width) * var(--screen-maxwidth));
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: "HOK-title";
  position: absolute;
  left: 0;
  top: calc(218 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 30;
}
.lang_ar .hok_news_des {
  font-family: "AR_Bold";
}

.lang_tw .hok_news_des {
  font-family: "CHT_Bold";
}

.lang_cn .hok_news_des {
  font-family: "CHS_Bold";
}

.lang_my .hok_news_des {
  font-family: "MM_Bold";
}

.lang_ja .hok_news_des {
  font-family: "NotoSansJP-Bold";
}

.lang_zh .devtalk_detail_title, .lang_zh .devtalk_tab, .lang_zh .security_cont_fm p, .lang_zh .devtalk_line, .lang_zh .devtalk_dev_info_name, .lang_zh .hok_news_des, .lang_cn .devtalk_detail_title, .lang_cn .devtalk_tab, .lang_cn .security_cont_fm p, .lang_cn .devtalk_line, .lang_cn .devtalk_dev_info_name, .lang_cn .hok_news_des, .lang_tw .devtalk_detail_title, .lang_tw .devtalk_tab, .lang_tw .security_cont_fm p, .lang_tw .devtalk_line, .lang_tw .devtalk_dev_info_name, .lang_tw .hok_news_des, .zh-Hant .devtalk_detail_title, .zh-Hant .devtalk_tab, .zh-Hant .security_cont_fm p, .zh-Hant .devtalk_line, .zh-Hant .devtalk_dev_info_name, .zh-Hant .hok_news_des, .lang_ja .devtalk_detail_title, .lang_ja .devtalk_tab, .lang_ja .security_cont_fm p, .lang_ja .devtalk_line, .lang_ja .devtalk_dev_info_name, .lang_ja .hok_news_des {
  font-family: "Microsoft YaHei";
  font-weight: bold;
}
.lang_zh .devtalk_dev_info_pnum, .lang_cn .devtalk_dev_info_pnum, .lang_tw .devtalk_dev_info_pnum, .zh-Hant .devtalk_dev_info_pnum, .lang_ja .devtalk_dev_info_pnum {
  font-family: "Microsoft YaHei";
}

.lang_my .hok_news_des {
  line-height: 1.8;
  font-size: calc(18 / var(--screen-width) * var(--screen-maxwidth));
}

.hok_news_destime {
  width: 100%;
  font-size: calc(18 / var(--screen-width) * var(--screen-maxwidth));
  line-height: calc(20 / var(--screen-width) * var(--screen-maxwidth));
  color: #ffffff;
  text-align: left;
  position: absolute;
  left: calc(8 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(200 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 30;
}

.news_btnbox {
  width: 100%;
  height: calc(51 / var(--screen-width) * var(--screen-maxwidth));
  margin: 0 auto;
  background: url(../img/more_line.png) no-repeat;
  background-size: calc(1704 / var(--screen-width) * var(--screen-maxwidth)) calc(7 / var(--screen-width) * var(--screen-maxwidth));
  background-position: 50% calc(21 / var(--screen-width) * var(--screen-maxwidth));
}

.more_btn {
  display: block;
  width: calc(199 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(51 / var(--screen-width) * var(--screen-maxwidth));
  /*background: url(../img/hd_joinbtn.png) no-repeat 100%/100%;*/
  font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  color: #ffffff;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  margin: 0 auto;
  /*filter: drop-shadow(#000 0 0 calc(15 / var(--screen-width) * var(--screen-maxwidth)));*/
  text-align: center;
  font-weight: bold;
  vertical-align: middle;
  position: relative;
}
.more_btn span {
  display: inline-block;
  vertical-align: middle;
  line-height: calc(51 / var(--screen-width) * var(--screen-maxwidth));
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffefc4), to(#ffffff));
  background-image: linear-gradient(#ffefc4, #ffffff);
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 30;
}
.more_btn .more_ibg {
  width: calc(426 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(122 / var(--screen-width) * var(--screen-maxwidth));
  background-image: url("../img/btnmore.png");
  background-size: calc(2556 / var(--screen-width) * var(--screen-maxwidth)) calc(2196 / var(--screen-width) * var(--screen-maxwidth));
  background-repeat: no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.more_btn:hover {
  -webkit-filter: brightness(1);
  filter: brightness(1);
  /*span{
  	&:after{
  		content:'';
  		display: inline-block;
  		vertical-align: middle;
  		width: calc(24 / var(--screen-width) * var(--screen-maxwidth));
  		height: calc(24 / var(--screen-width) * var(--screen-maxwidth));
  		background: url(../img/hov_jt.png) no-repeat 100%/100%;
  		margin: calc(-3 / var(--screen-width) * var(--screen-maxwidth)) 0 0 calc(3 / var(--screen-width) * var(--screen-maxwidth));
  	}
  }*/
}
.more_btn:hover .more_ibg {
  width: calc(426 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(122 / var(--screen-width) * var(--screen-maxwidth));
  background-image: url("../img/btnmore.png");
  background-size: calc(2556 / var(--screen-width) * var(--screen-maxwidth)) calc(2196 / var(--screen-width) * var(--screen-maxwidth));
  background-repeat: no-repeat;
  -webkit-animation-name: btnmore;
  animation-name: btnmore;
  -webkit-animation-duration: 4.32s;
  animation-duration: 4.32s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: steps(1);
  animation-timing-function: steps(1);
}

.hok_jtnews_list {
  width: calc(100vw - 48px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: calc(0.0299455535 * var(--screen-maxwidth)) auto 0;
}
.hok_jtnews_list li {
  width: calc((100vw - 72px) / 2);
  height: calc(0.1896551724 * var(--screen-maxwidth));
  margin: 0 calc(0.0054446461 * var(--screen-maxwidth));
  -webkit-transition: background 1s;
  transition: background 1s;
  border: #cb973a solid 2px;
  position: relative;
}
.hok_jtnews_list li a {
  display: block;
  width: 100%;
  height: 100%;
}
.hok_jtnews_list li.lft {
  background: url(../img/news_type2_img1.png) no-repeat center;
  background-size: 100% 100%;
}
.hok_jtnews_list li.rft {
  background: url(../img/news_type2_img2.png) no-repeat center;
  background-size: 100% 100%;
}
.hok_jtnews_list li.rft.en {
  background: url(../img/mjtnews_bg_en.jpg) no-repeat 100%/100%;
}
.hok_jtnews_list li.rft.latam {
  background: url(../img/mjtnews_bg_es.jpg) no-repeat 100%/100%;
}
.hok_jtnews_list li.rft.mena {
  background: url(../img/mjtnews_bg_ar.jpg) no-repeat 100%/100%;
}
.hok_jtnews_list li.rft.br {
  background: url(../img/mjtnews_bg_pt.jpg) no-repeat 100%/100%;
}
.hok_jtnews_list li.rft.tr {
  background: url(../img/mjtnews_bg_tr.jpg) no-repeat 100%/100%;
}
.hok_jtnews_list .hok_jtnews_p1 {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  top: calc(0.1497277677 * var(--screen-maxwidth));
  font-size: calc(0.0081669691 * var(--screen-maxwidth));
  color: #ffffff;
}
.hok_jtnews_list .hok_jtnews_icon {
  display: inline-block;
  vertical-align: top;
  width: calc(0.0054446461 * var(--screen-maxwidth));
  height: calc(0.0054446461 * var(--screen-maxwidth));
  background: url(../img/news_jticon.png) no-repeat 100%/100%;
  margin: calc(0.0045372051 * var(--screen-maxwidth)) calc(0.001814882 * var(--screen-maxwidth)) 0;
}
.hok_jtnews_list .hok_jtnews_p2 {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  top: calc(0.1624319419 * var(--screen-maxwidth));
  font-size: calc(0.0136116152 * var(--screen-maxwidth));
  color: #ffffff;
}

.hok_jtnews_line {
  display: block;
  width: 100%;
  height: calc(0.0054446461 * var(--screen-maxwidth));
  background: url(../img/hok_jtnews_line.png) no-repeat center;
  background-size: calc(1.0167876588 * var(--screen-maxwidth)) calc(0.0054446461 * var(--screen-maxwidth));
  margin: calc(0.0272232305 * var(--screen-maxwidth)) auto 0;
}

.hok_part2 {
  width: 100%;
  height: calc(940 / var(--screen-width) * var(--screen-maxwidth));
  background: #fff;
  background-size: 140% auto;
  background-position: 50% -200px;
  position: relative;
  z-index: 20;
  /*overflow: hidden;*/
}
.hok_part2.animate {
  /*.kv_bg{
  	background-size: 100% auto;
  }*/
}
.hok_part2.animate .hok_p1 {
  -webkit-animation: wzs 1s 1 both;
  animation: wzs 1s 1 both;
}
.hok_part2.animate .hok_kv_tit {
  -webkit-animation: wzs 1s 0.3s 1 both;
  animation: wzs 1s 0.3s 1 both;
}
.hok_part2.animate .hok_iconlist {
  -webkit-animation: wzs 1s 0.7s 1 both;
  animation: wzs 1s 0.7s 1 both;
}
.hok_part2.animate .hok_kvchangelist {
  -webkit-animation: wzs 1s 1s 1 both;
  animation: wzs 1s 1s 1 both;
}
.hok_part2.animate .hok_kvpara {
  -webkit-animation: wzs 1s 1.3s 1 both;
  animation: wzs 1s 1.3s 1 both;
}
.hok_part2 .kv_bg {
  background: url(../img/kv.jpg) no-repeat top center;
  background-size: 100% auto;
  width: 100%;
  height: calc(0.5625 * var(--screen-maxwidth));
  max-height: 100vh;
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  -webkit-transition: background 2s;
  transition: background 2s;
  max-height: 100%;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), color-stop(96%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  -webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 96%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
}
.scale {
  width: 100%;
  height: calc(0.6875 * var(--screen-maxwidth));
  position: relative;
  z-index: 20;
  -webkit-transform: translate(0, calc(100vh - 0.6875 * var(--screen-maxwidth)));
  transform: translate(0, calc(100vh - 0.6875 * var(--screen-maxwidth)));
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0)), color-stop(100%, rgb(255, 255, 255)), to(rgb(255, 255, 255)));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 30%, rgb(255, 255, 255) 100%, rgb(255, 255, 255) 100%);
}

.hok_p1 {
  opacity: 0;
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  top: calc(0.3666666667 * var(--screen-maxwidth));
  font-size: calc(0.015625 * var(--screen-maxwidth));
  color: #242424;
  z-index: 20;
}

.hok_p1sdf {
  opacity: 0;
  width: 100%;
  text-align: left;
  position: absolute;
  left: calc(0.046875 * var(--screen-maxwidth));
  /*max-width: calc(1000 / 1920 * var(--screen-maxwidth));*/
  top: calc(0.01875 * var(--screen-maxwidth));
  font-size: calc(0.0135416667 * var(--screen-maxwidth));
  color: #ffffff;
  z-index: 20;
}

.kv_top {
  width: 100%;
  min-width: calc(1.1666666667 * var(--screen-maxwidth));
  height: calc(0.5625 * var(--screen-maxwidth));
  max-height: 100vh;
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  z-index: 30;
  display: none;
}
.kv_top:after {
  content: "";
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(255, 255, 255)), color-stop(50%, rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(to top, rgb(255, 255, 255) 0, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  left: 0;
  top: 0;
}

.hok_kv_tit {
  position: absolute;
  left: 0;
  top: calc(0.3989583333 * var(--screen-maxwidth));
  z-index: 30;
}
.hok_kv_tit span,
.hok_kv_tit i {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#8a520a), to(#ad7e2b));
  background-image: linear-gradient(to bottom, #8a520a, #ad7e2b);
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hok_gb_tit {
  text-align: left;
  font-size: calc(0.0385416667 * var(--screen-maxwidth));
  line-height: unset;
  left: calc(0.046875 * var(--screen-maxwidth));
  top: calc(0.0416666667 * var(--screen-maxwidth));
  height: auto;
  margin-top: calc(-0.00625 * var(--screen-maxwidth));
  -webkit-filter: drop-shadow(rgba(52, 65, 106, 0.85) 0 2px 10px);
  filter: drop-shadow(rgba(52, 65, 106, 0.85) 0 2px 10px);
}
.hok_gb_tit i {
  font-style: normal;
  display: block;
  font-size: calc(0.0385416667 * var(--screen-maxwidth));
  margin-top: calc(-0.0135416667 * var(--screen-maxwidth));
}
.hok_gb_tit strong {
  display: block;
  -webkit-filter: drop-shadow(rgba(112, 96, 69, 0.64) 0 2px 0);
  filter: drop-shadow(rgba(112, 96, 69, 0.64) 0 2px 0);
}
.hok_gb_tit span {
  display: block;
  -webkit-filter: none;
  filter: none;
}
.hok_gb_tit span,
.hok_gb_tit i {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffdb9b), to(#fef7ef));
  background-image: linear-gradient(to bottom, #ffdb9b, #fef7ef);
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hok_gb_tit:after {
  display: none;
}

.lang_br .hok_gb_tit,
.lang_es .hok_gb_tit,
.lang_ru .hok_gb_tit {
  margin-top: 0;
}

@media screen and (min-width: 901px) {
  .lang_br .hok_gb_tit,
  .lang_es .hok_gb_tit,
  .lang_ru .hok_gb_tit {
    margin-top: 0;
  }
}
.lang_br .hok_gb_tit i {
  margin-bottom: calc(-0.0072916667 * var(--screen-maxwidth));
}

.wel_logo {
  width: 150%;
  font-size: 2vh;
  color: #fbd89b;
  text-align: center;
  position: absolute;
  /* left: 0; */
  top: 2.7vh;
  /* width: 100%; */
  letter-spacing: 2vh;
  text-indent: 2vh;
  white-space: nowrap;
  left: 50%;
  margin-left: -75%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-indent: 2vh;
}
.wel_logo:before {
  content: "";
  display: block;
  width: calc(32 / var(--screen-width) * var(--screen-maxwidth));
  height: 0;
  border-top: #fbd89b solid 2px;
  vertical-align: middle;
  margin: 0 calc(20 / var(--screen-width) * var(--screen-maxwidth)) 0;
}
.wel_logo:after {
  content: "";
  display: block;
  width: calc(32 / var(--screen-width) * var(--screen-maxwidth));
  height: 0;
  border-top: #fbd89b solid 2px;
  vertical-align: middle;
  margin: 0 calc(20 / var(--screen-width) * var(--screen-maxwidth)) 0;
}

.hok_soon {
  width: 100%;
  text-align: center;
  font-size: calc(0.0104166667 * var(--screen-maxwidth));
  color: #242424;
  position: absolute;
  left: 0;
  top: calc(0.1604166667 * var(--screen-maxwidth));
  /*opacity: 0;*/
}

.hok_iconlist {
  opacity: 0;
  width: 100%;
  text-align: center;
  font-size: 0;
  position: absolute;
  left: 0;
  bottom: calc(196 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 70;
}
.hok_iconlist li {
  width: calc(0.0770833333 * var(--screen-maxwidth));
  height: calc(0.0703125 * var(--screen-maxwidth));
  display: inline-block;
  vertical-align: top;
  margin: 0 calc(0.0427083333 * var(--screen-maxwidth));
}
.hok_iconlist li img {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
.hok_iconlist li.cur img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.hok_pts2_box {
  width: 100%;
  position: absolute;
  left: 0;
  top: calc(651 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 50;
}
.hok_pts2_box:before {
  content: "";
  width: calc(0.109375 * var(--screen-maxwidth));
  height: calc(0.05 * var(--screen-maxwidth));
  background: url(../img/kv_wzmask.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  top: calc(-0.0104166667 * var(--screen-maxwidth));
  margin-left: calc(-0.0546875 * var(--screen-maxwidth));
  z-index: 10;
}
.hok_pts2_box .hok_pts2_para {
  width: 100%;
  height: calc(0.0229166667 * var(--screen-maxwidth));
  line-height: calc(0.0229166667 * var(--screen-maxwidth));
  text-align: center;
  font-size: calc(0.0125 * var(--screen-maxwidth));
  color: #242424;
  font-weight: bold;
  position: relative;
  z-index: 30;
}
.hok_pts2_box .hok_pts2_para:before {
  content: "";
  width: calc(0.3765625 * var(--screen-maxwidth));
  height: calc(0.0036458333 * var(--screen-maxwidth));
  background: url(../img/pts2_line1.png) no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  vertical-align: top;
  margin: calc(0.0098958333 * var(--screen-maxwidth)) calc(0.0072916667 * var(--screen-maxwidth)) 0;
}
.hok_pts2_box .hok_pts2_para:after {
  content: "";
  width: calc(0.3765625 * var(--screen-maxwidth));
  height: calc(0.0036458333 * var(--screen-maxwidth));
  background: url(../img/pts2_line2.png) no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  vertical-align: top;
  margin: calc(0.0098958333 * var(--screen-maxwidth)) calc(0.0072916667 * var(--screen-maxwidth)) 0;
}
.hok_pts2_box .hok_pts2_list {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: calc(0.009375 * var(--screen-maxwidth)) auto 0;
}
.hok_pts2_box .hok_pts2_list li {
  width: calc(0.2864583333 * var(--screen-maxwidth));
  height: calc(0.103125 * var(--screen-maxwidth));
  background: url(../img/part2_lne.png) no-repeat;
  background-size: 100% 100%;
  margin: 0 calc(0.0067708333 * var(--screen-maxwidth));
  overflow: hidden;
  cursor: pointer;
}
.hok_pts2_box .hok_pts2_list li:hover {
  background: url(../img/part2_lne_hov.png) no-repeat;
  background-size: 100% 100%;
}
.hok_pts2_box .hok_pts2_list li:hover .hok_pts2_name {
  color: #fffcf4;
}
.hok_pts2_box .hok_pts2_list li:hover .hok_pts2_icon.rakicon1 {
  background: url(../img/rak_hov_icon1.png) no-repeat;
  background-size: 100% 100%;
}
.hok_pts2_box .hok_pts2_list li:hover .hok_pts2_icon.rakicon2 {
  background: url(../img/rak_hov_icon2.png) no-repeat;
  background-size: 100% 100%;
}
.hok_pts2_box .hok_pts2_list li:hover .hok_pts2_icon.rakicon3 {
  background: url(../img/rak_hov_icon3.png) no-repeat;
  background-size: 100% 100%;
}
.hok_pts2_box .hok_pts2_list li:hover .hok_pts2_des {
  color: #ffffff;
}
.hok_pts2_box .hok_pts2_name {
  width: 100%;
  text-align: center;
  margin: calc(0.0135416667 * var(--screen-maxwidth)) auto 0;
  font-size: calc(0.0166666667 * var(--screen-maxwidth));
  line-height: calc(0.0229166667 * var(--screen-maxwidth));
  font-weight: bold;
  color: #8a520a;
}
.hok_pts2_box .hok_pts2_icon {
  display: inline-block;
  vertical-align: top;
  margin-right: calc(0.00625 * var(--screen-maxwidth));
  margin-top: calc(-0.0020833333 * var(--screen-maxwidth));
}
.hok_pts2_box .hok_pts2_icon.rakicon1 {
  width: calc(0.021875 * var(--screen-maxwidth));
  height: calc(0.021875 * var(--screen-maxwidth));
  background: url(../img/rak_icon1.png) no-repeat;
  background-size: 100% 100%;
}
.hok_pts2_box .hok_pts2_icon.rakicon2 {
  width: calc(0.021875 * var(--screen-maxwidth));
  height: calc(0.021875 * var(--screen-maxwidth));
  background: url(../img/rak_icon2.png) no-repeat;
  background-size: 100% 100%;
}
.hok_pts2_box .hok_pts2_icon.rakicon3 {
  width: calc(0.021875 * var(--screen-maxwidth));
  height: calc(0.021875 * var(--screen-maxwidth));
  background: url(../img/rak_icon3.png) no-repeat;
  background-size: 100% 100%;
}
.hok_pts2_box .hok_pts2_des {
  width: calc(0.2541666667 * var(--screen-maxwidth));
  margin: calc(0.0072916667 * var(--screen-maxwidth)) auto 0;
  font-size: calc(20 / var(--screen-width) * var(--screen-maxwidth));
  line-height: calc(0.015625 * var(--screen-maxwidth));
  color: #242424;
  letter-spacing: calc(-0.5 / var(--screen-width) * var(--screen-maxwidth));
}
.lang_ja .hok_pts2_box .hok_pts2_des {
  line-height: calc(0.0125 * var(--screen-maxwidth));
}

.lang_ms .hok_pts2_box .hok_pts2_des, .lang_id .hok_pts2_box .hok_pts2_des {
  font-size: calc(0.009375 * var(--screen-maxwidth));
}

.lang_id .hok_pts2_box .hok_pts2_des {
  font-size: calc(0.0083333333 * var(--screen-maxwidth));
}

.lang_en .hok_pts2_list .hok_pts2_des {
  width: calc(0.265625 * var(--screen-maxwidth));
  line-height: calc(0.0135416667 * var(--screen-maxwidth));
}

.lang_br .hok_pts2_box .hok_pts2_des {
  line-height: calc(0.0125 * var(--screen-maxwidth));
}

.lang_es .hok_pts2_list li .hok_pts2_des,
.lang_ru .hok_pts2_list li .hok_pts2_des {
  line-height: calc(0.0119791667 * var(--screen-maxwidth));
}

.hok_kvpara {
  opacity: 0;
  text-align: center;
  width: calc(0.7322916667 * var(--screen-maxwidth));
  height: calc(0.0130208333 * var(--screen-maxwidth));
  background: url(../img/kv_line.png) no-repeat;
  background-size: calc(0.7322916667 * var(--screen-maxwidth)) calc(0.0083333333 * var(--screen-maxwidth));
  position: absolute;
  left: 50%;
  bottom: calc(0.0479166667 * var(--screen-maxwidth));
  margin-left: calc(-0.3661458333 * var(--screen-maxwidth));
  text-align: center;
  font-size: calc(0.0104166667 * var(--screen-maxwidth));
  color: #242424;
  line-height: calc(0.0135416667 * var(--screen-maxwidth));
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: calc(0.00625 * var(--screen-maxwidth)) calc(0.178125 * var(--screen-maxwidth)) 0;
  z-index: 70;
}
.hok_kvpara span {
  display: block;
  width: 100%;
  display: none;
  word-break: normal;
}
.hok_kvpara:after {
  content: "";
  width: calc(0.1760416667 * var(--screen-maxwidth));
  height: calc(0.0083333333 * var(--screen-maxwidth));
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  background: url(../img/kv_line_xz.png) no-repeat 100%/100%;
}
.hok_kvpara.kvline1:after {
  left: calc(0.1109375 * var(--screen-maxwidth));
}
.hok_kvpara.kvline2:after {
  left: 50%;
  margin-left: calc(-0.0869791667 * var(--screen-maxwidth));
}
.hok_kvpara.kvline3:after {
  left: calc(0.4447916667 * var(--screen-maxwidth));
}

.hok_tips {
  display: block;
  width: calc(0.025 * var(--screen-maxwidth));
  height: calc(0.0364583333 * var(--screen-maxwidth));
  background: url(../img/yd_icon.png) no-repeat 100%/100%;
  position: absolute;
  left: 50%;
  bottom: calc(-0.0427083333 * var(--screen-maxwidth));
  margin-left: calc(-0.0125 * var(--screen-maxwidth));
  -webkit-animation: tips 2s infinite;
  animation: tips 2s infinite;
  z-index: 70;
}

@-webkit-keyframes tips {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, calc(20 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(20 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes tips {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, calc(20 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(20 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
.hok_mf_icon {
  display: block;
  width: calc(74 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(75 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/mf_icon.png) no-repeat 100%/100%;
  position: absolute;
  left: 50%;
  top: calc(-38 / var(--screen-width) * var(--screen-maxwidth));
  margin-left: calc(-37 / var(--screen-width) * var(--screen-maxwidth));
}
.hok_mf_icon.hok_mf_iconsd {
  top: unset;
  bottom: calc(-37 / var(--screen-width) * var(--screen-maxwidth));
}

.hok_part3 {
  height: calc(1050 / var(--screen-width) * var(--screen-maxwidth));
  width: 100%;
  position: relative;
  max-height: 100vh;
  margin-top: calc(64 / var(--screen-width) * var(--screen-maxwidth));
}
.hok_part3.animate .hok_p2 {
  -webkit-animation: wzs 1s 1 both;
  animation: wzs 1s 1 both;
}
.hok_part3.animate .hok_news_tit2 {
  -webkit-animation: wzs 1s 0.8s 1 both;
  animation: wzs 1s 0.8s 1 both;
}
.hok_part3.animate .hok_map {
  -webkit-animation: wzs 1s 1.2s 1 both;
  animation: wzs 1s 1.2s 1 both;
}

.hok_part3_in {
  height: calc(1050 / var(--screen-width) * var(--screen-maxwidth));
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-top: 1px;
}

.map_bigimg {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 5;
}
.map_bigimg .map_vimg {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.map_bigimg .map_vimg img {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 30;
  pointer-events: none;
}
.map_bigimg .map_vimg img.vspe {
  width: 124%;
}
.map_bigimg .map_vimg video {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 30;
  pointer-events: none;
  display: none;
}
.map_bigimg .map_vimg video.vspe {
  width: 124%;
}
.map_bigimg .map_vimg.cur {
  opacity: 1;
}

.hok_p2 {
  top: calc(46 / var(--screen-width) * var(--screen-maxwidth));
}

.hok_news_tit2 {
  top: calc(95 / var(--screen-width) * var(--screen-maxwidth));
}

.hok_map {
  opacity: 0;
  width: calc(593 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(428 / var(--screen-width) * var(--screen-maxwidth));
  /*background: url(../img/map.png) no-repeat 100%/100%;*/
  position: absolute;
  left: calc(152 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(632 / var(--screen-width) * var(--screen-maxwidth));
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  z-index: 20;
  margin-top: calc(min(0, 100vh - 1175 / var(--screen-width) * var(--screen-maxwidth)) / 2);
}

.hok_map_dw {
  display: block;
  width: calc(653 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(462 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: calc(10 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(-36 / var(--screen-width) * var(--screen-maxwidth));
  background: url("../img/map_dw_bg.png") no-repeat left top;
  background-size: calc(586 / var(--screen-width) * var(--screen-maxwidth)) calc(393 / var(--screen-width) * var(--screen-maxwidth));
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  z-index: 5;
}
.hok_map_dw em {
  display: block;
  width: calc(586 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(393 / var(--screen-width) * var(--screen-maxwidth));
}
.hok_map_dw em i {
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 67.0648464164%;
  background-image: url("../img/map_dw_line.png");
  background-size: 600% 700%;
  background-repeat: no-repeat;
  -webkit-animation-name: keyframes-mapline;
  animation-name: keyframes-mapline;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: steps(1);
  animation-timing-function: steps(1);
}

@-webkit-keyframes keyframes-mapline {
  0% {
    background-position: 0 0;
  }
  2.78% {
    background-position: 20% 0%;
  }
  5.56% {
    background-position: 0% 16.6666666667%;
  }
  8.33% {
    background-position: 20% 16.6666666667%;
  }
  11.11% {
    background-position: 40% 0%;
  }
  13.89% {
    background-position: 40% 16.6666666667%;
  }
  16.67% {
    background-position: 0% 33.3333333333%;
  }
  19.44% {
    background-position: 20% 33.3333333333%;
  }
  22.22% {
    background-position: 40% 33.3333333333%;
  }
  25.00% {
    background-position: 0% 50%;
  }
  27.78% {
    background-position: 20% 50%;
  }
  30.56% {
    background-position: 40% 50%;
  }
  33.33% {
    background-position: 60% 0%;
  }
  36.11% {
    background-position: 60% 16.6666666667%;
  }
  38.89% {
    background-position: 60% 33.3333333333%;
  }
  41.67% {
    background-position: 60% 50%;
  }
  44.44% {
    background-position: 0% 66.6666666667%;
  }
  47.22% {
    background-position: 20% 66.6666666667%;
  }
  50.00% {
    background-position: 40% 66.6666666667%;
  }
  52.78% {
    background-position: 60% 66.6666666667%;
  }
  55.56% {
    background-position: 80% 0%;
  }
  58.33% {
    background-position: 80% 16.6666666667%;
  }
  61.11% {
    background-position: 80% 33.3333333333%;
  }
  63.89% {
    background-position: 80% 50%;
  }
  66.67% {
    background-position: 80% 66.6666666667%;
  }
  69.44% {
    background-position: 0% 83.3333333333%;
  }
  72.22% {
    background-position: 20% 83.3333333333%;
  }
  75.00% {
    background-position: 40% 83.3333333333%;
  }
  77.78% {
    background-position: 60% 83.3333333333%;
  }
  80.56% {
    background-position: 80% 83.3333333333%;
  }
  83.33% {
    background-position: 0% 100%;
  }
  86.11% {
    background-position: 20% 100%;
  }
  88.89% {
    background-position: 40% 100%;
  }
  91.67% {
    background-position: 60% 100%;
  }
  94.44% {
    background-position: 80% 100%;
  }
  97.22%, 100% {
    background-position: 100% 0%;
  }
}
@keyframes keyframes-mapline {
  0% {
    background-position: 0 0;
  }
  2.78% {
    background-position: 20% 0%;
  }
  5.56% {
    background-position: 0% 16.6666666667%;
  }
  8.33% {
    background-position: 20% 16.6666666667%;
  }
  11.11% {
    background-position: 40% 0%;
  }
  13.89% {
    background-position: 40% 16.6666666667%;
  }
  16.67% {
    background-position: 0% 33.3333333333%;
  }
  19.44% {
    background-position: 20% 33.3333333333%;
  }
  22.22% {
    background-position: 40% 33.3333333333%;
  }
  25.00% {
    background-position: 0% 50%;
  }
  27.78% {
    background-position: 20% 50%;
  }
  30.56% {
    background-position: 40% 50%;
  }
  33.33% {
    background-position: 60% 0%;
  }
  36.11% {
    background-position: 60% 16.6666666667%;
  }
  38.89% {
    background-position: 60% 33.3333333333%;
  }
  41.67% {
    background-position: 60% 50%;
  }
  44.44% {
    background-position: 0% 66.6666666667%;
  }
  47.22% {
    background-position: 20% 66.6666666667%;
  }
  50.00% {
    background-position: 40% 66.6666666667%;
  }
  52.78% {
    background-position: 60% 66.6666666667%;
  }
  55.56% {
    background-position: 80% 0%;
  }
  58.33% {
    background-position: 80% 16.6666666667%;
  }
  61.11% {
    background-position: 80% 33.3333333333%;
  }
  63.89% {
    background-position: 80% 50%;
  }
  66.67% {
    background-position: 80% 66.6666666667%;
  }
  69.44% {
    background-position: 0% 83.3333333333%;
  }
  72.22% {
    background-position: 20% 83.3333333333%;
  }
  75.00% {
    background-position: 40% 83.3333333333%;
  }
  77.78% {
    background-position: 60% 83.3333333333%;
  }
  80.56% {
    background-position: 80% 83.3333333333%;
  }
  83.33% {
    background-position: 0% 100%;
  }
  86.11% {
    background-position: 20% 100%;
  }
  88.89% {
    background-position: 40% 100%;
  }
  91.67% {
    background-position: 60% 100%;
  }
  94.44% {
    background-position: 80% 100%;
  }
  97.22%, 100% {
    background-position: 100% 0%;
  }
}
.md_line {
  position: absolute;
  width: calc(144 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(131 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/md_icon.png) no-repeat 100%/100%;
  z-index: 20;
  -webkit-animation: floating 2s linear infinite;
  animation: floating 2s linear infinite;
}
.md_line.big {
  -webkit-animation: none;
  animation: none;
}
.md_line.big .hok_pbox {
  display: block;
}
.md_line.big .hok_pbox .hok_pname {
  -webkit-animation: wz 0.5s 1.5s 1 both;
  animation: wz 0.5s 1.5s 1 both;
}
.md_line.big .hok_pbox .hok_pname_des {
  -webkit-animation: wz 0.5s 1.7s 1 both;
  animation: wz 0.5s 1.7s 1 both;
}
.md_line.big .hok_pbox:after {
  -webkit-animation: wz 0.5s 2s 1 both;
  animation: wz 0.5s 2s 1 both;
}
.md_line.mds1 {
  left: calc(394 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(-54 / var(--screen-width) * var(--screen-maxwidth));
}
.md_line.mds1.big {
  left: calc(302 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(-440 / var(--screen-width) * var(--screen-maxwidth));
}
.md_line.mds1.big .md_dline {
  background: url(../img/md_line_lne5.png) no-repeat bottom center;
  background-size: 100% auto;
}
.md_line.mds1 .hok_pbox {
  top: calc(188 / var(--screen-width) * var(--screen-maxwidth));
}
.md_line.mds1 .md_xz {
  bottom: calc(-70 / var(--screen-width) * var(--screen-maxwidth));
}
.md_line.mds2 {
  left: calc(199 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(-26 / var(--screen-width) * var(--screen-maxwidth));
}
.md_line.mds2.big {
  left: calc(109 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(-407 / var(--screen-width) * var(--screen-maxwidth));
}
.md_line.mds2 .hok_pbox {
  top: calc(131 / var(--screen-width) * var(--screen-maxwidth));
  left: calc(230 / var(--screen-width) * var(--screen-maxwidth));
}
.md_line.mds2 .hok_pbox .hok_pname,
.md_line.mds2 .hok_pbox .hok_pname_des {
  text-align: left;
}
.md_line.mds2 .hok_pbox:after {
  right: unset;
  left: 0;
  background: url(../img/map_hok_pline2.png) no-repeat 100%/100%;
}
.md_line.mds2 .md_xz {
  bottom: calc(-6 / var(--screen-width) * var(--screen-maxwidth));
}
.md_line.mds3 {
  left: calc(279 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(22 / var(--screen-width) * var(--screen-maxwidth));
}
.md_line.mds3.big {
  left: calc(187 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(-357 / var(--screen-width) * var(--screen-maxwidth));
}
.md_line.mds3.big .md_dline {
  background: url(../img/md_line_lne2.png) no-repeat bottom center;
  background-size: 100% auto;
}
.md_line.mds3 .md_xz {
  bottom: calc(52 / var(--screen-width) * var(--screen-maxwidth));
  left: calc(0 / var(--screen-width) * var(--screen-maxwidth));
}
.md_line.mds3 .hok_pbox {
  top: calc(68 / var(--screen-width) * var(--screen-maxwidth));
  left: calc(230 / var(--screen-width) * var(--screen-maxwidth));
}
.md_line.mds3 .hok_pbox .hok_pname,
.md_line.mds3 .hok_pbox .hok_pname_des {
  text-align: left;
}
.md_line.mds3 .hok_pbox:after {
  right: unset;
  left: 0;
  background: url(../img/map_hok_pline2.png) no-repeat 100%/100%;
}
.md_line.mds4 {
  left: calc(390 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(110 / var(--screen-width) * var(--screen-maxwidth));
}
.md_line.mds4.big {
  left: calc(299 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(-270 / var(--screen-width) * var(--screen-maxwidth));
}
.md_line.mds4.big .md_dline {
  background: url(../img/md_line_lne3.png) no-repeat bottom center;
  background-size: 100% auto;
}
.md_line.mds4 .md_xz {
  bottom: calc(110 / var(--screen-width) * var(--screen-maxwidth));
}
.md_line.mds4 .hok_pbox {
  top: calc(10 / var(--screen-width) * var(--screen-maxwidth));
}
.md_line.mds5 {
  left: calc(13 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(200 / var(--screen-width) * var(--screen-maxwidth));
}
.md_line.mds5.big {
  left: calc(-78 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(-186 / var(--screen-width) * var(--screen-maxwidth));
}
.md_line.mds5.big .md_dline {
  background: url(../img/md_line_lne4.png) no-repeat bottom center;
  background-size: 100% auto;
  -webkit-animation: line2 0.5s 0.2s 1 both;
  animation: line2 0.5s 0.2s 1 both;
}
.md_line.mds5 .md_xz {
  bottom: calc(186 / var(--screen-width) * var(--screen-maxwidth));
}
.md_line.mds5 .hok_pbox {
  top: calc(-70 / var(--screen-width) * var(--screen-maxwidth));
  left: calc(230 / var(--screen-width) * var(--screen-maxwidth));
}
.md_line.mds5 .hok_pbox .hok_pname,
.md_line.mds5 .hok_pbox .hok_pname_des {
  text-align: left;
}
.md_line.mds5 .hok_pbox:after {
  right: unset;
  left: 0;
  background: url(../img/map_hok_pline2.png) no-repeat 100%/100%;
}
.md_line.big {
  width: calc(326 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(537 / var(--screen-width) * var(--screen-maxwidth));
  background: none;
  /*background: url(../img/md_line.png) no-repeat 100%/100%;*/
  pointer-events: none;
}
.md_line.big span {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
.md_line.big .md_dz {
  display: block;
  width: calc(364 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(482 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: calc(-18 / var(--screen-width) * var(--screen-maxwidth));
  bottom: calc(-102 / var(--screen-width) * var(--screen-maxwidth));
}
.md_line.big .md_dz i {
  display: block;
  width: calc(1 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(1 / var(--screen-width) * var(--screen-maxwidth));
  background-image: url("../img/dzani.png");
  background-position: calc(-1705 / var(--screen-width) * var(--screen-maxwidth)) calc(-261 / var(--screen-width) * var(--screen-maxwidth));
  background-size: calc(1711 / var(--screen-width) * var(--screen-maxwidth)) calc(1474 / var(--screen-width) * var(--screen-maxwidth));
  background-repeat: no-repeat;
  -webkit-animation-name: mdline;
  animation-name: mdline;
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: steps(1);
  animation-timing-function: steps(1);
}
.md_line.big .md_dline {
  height: 0;
  background: url(../img/md_line_lne.png) no-repeat bottom center;
  background-size: 100% auto;
  -webkit-animation: line 0.5s 0.2s 1 both;
  animation: line 0.5s 0.2s 1 both;
  z-index: 0;
}
.md_line.big .md_xz {
  opacity: 0;
  background: url(../img/md_line_xz.png) no-repeat 100%/100%;
  -webkit-animation: xz 1s 0.5s 1 both;
  animation: xz 1s 0.5s 1 both;
  z-index: 30;
}

@-webkit-keyframes floating {
  0% {
    -webkit-transform: translate(0, -5px);
    transform: translate(0, -5px);
  }
  25% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, 5px);
    transform: translate(0, 5px);
  }
  75% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, -5px);
    transform: translate(0, -5px);
  }
}
@keyframes floating {
  0% {
    -webkit-transform: translate(0, -5px);
    transform: translate(0, -5px);
  }
  25% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, 5px);
    transform: translate(0, 5px);
  }
  75% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, -5px);
    transform: translate(0, -5px);
  }
}
@-webkit-keyframes dz {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes dz {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes line {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes line2 {
  0% {
    height: 0;
  }
  100% {
    height: calc(584 / var(--screen-width) * var(--screen-maxwidth));
  }
}
@-webkit-keyframes xz {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}
@keyframes xz {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}
@-webkit-keyframes yd1 {
  0% {
    opacity: 0;
    -webkit-transform: translate(calc(-34 / var(--screen-width) * var(--screen-maxwidth)), calc(13 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(-34 / var(--screen-width) * var(--screen-maxwidth)), calc(13 / var(--screen-width) * var(--screen-maxwidth)));
  }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(54 / var(--screen-width) * var(--screen-maxwidth)), calc(13 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(54 / var(--screen-width) * var(--screen-maxwidth)), calc(13 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes yd1 {
  0% {
    opacity: 0;
    -webkit-transform: translate(calc(-34 / var(--screen-width) * var(--screen-maxwidth)), calc(13 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(-34 / var(--screen-width) * var(--screen-maxwidth)), calc(13 / var(--screen-width) * var(--screen-maxwidth)));
  }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(54 / var(--screen-width) * var(--screen-maxwidth)), calc(13 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(54 / var(--screen-width) * var(--screen-maxwidth)), calc(13 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@-webkit-keyframes yd2 {
  0% {
    opacity: 0;
    -webkit-transform: translate(calc(25 / var(--screen-width) * var(--screen-maxwidth)), calc(47 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(25 / var(--screen-width) * var(--screen-maxwidth)), calc(47 / var(--screen-width) * var(--screen-maxwidth)));
  }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(-36 / var(--screen-width) * var(--screen-maxwidth)), calc(-18 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(-36 / var(--screen-width) * var(--screen-maxwidth)), calc(-18 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes yd2 {
  0% {
    opacity: 0;
    -webkit-transform: translate(calc(25 / var(--screen-width) * var(--screen-maxwidth)), calc(47 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(25 / var(--screen-width) * var(--screen-maxwidth)), calc(47 / var(--screen-width) * var(--screen-maxwidth)));
  }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(-36 / var(--screen-width) * var(--screen-maxwidth)), calc(-18 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(-36 / var(--screen-width) * var(--screen-maxwidth)), calc(-18 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@-webkit-keyframes yd3 {
  0% {
    opacity: 0;
    -webkit-transform: translate(calc(-53 / var(--screen-width) * var(--screen-maxwidth)), calc(48 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(-53 / var(--screen-width) * var(--screen-maxwidth)), calc(48 / var(--screen-width) * var(--screen-maxwidth)));
  }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(70 / var(--screen-width) * var(--screen-maxwidth)), calc(-68 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(70 / var(--screen-width) * var(--screen-maxwidth)), calc(-68 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes yd3 {
  0% {
    opacity: 0;
    -webkit-transform: translate(calc(-53 / var(--screen-width) * var(--screen-maxwidth)), calc(48 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(-53 / var(--screen-width) * var(--screen-maxwidth)), calc(48 / var(--screen-width) * var(--screen-maxwidth)));
  }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(70 / var(--screen-width) * var(--screen-maxwidth)), calc(-68 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(70 / var(--screen-width) * var(--screen-maxwidth)), calc(-68 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@-webkit-keyframes yd4 {
  0% {
    opacity: 0;
    -webkit-transform: translate(calc(53 / var(--screen-width) * var(--screen-maxwidth)), calc(61 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(53 / var(--screen-width) * var(--screen-maxwidth)), calc(61 / var(--screen-width) * var(--screen-maxwidth)));
  }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(-22 / var(--screen-width) * var(--screen-maxwidth)), calc(-20 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(-22 / var(--screen-width) * var(--screen-maxwidth)), calc(-20 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes yd4 {
  0% {
    opacity: 0;
    -webkit-transform: translate(calc(53 / var(--screen-width) * var(--screen-maxwidth)), calc(61 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(53 / var(--screen-width) * var(--screen-maxwidth)), calc(61 / var(--screen-width) * var(--screen-maxwidth)));
  }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(-22 / var(--screen-width) * var(--screen-maxwidth)), calc(-20 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(-22 / var(--screen-width) * var(--screen-maxwidth)), calc(-20 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@-webkit-keyframes yd5 {
  0% {
    opacity: 0;
    -webkit-transform: translate(calc(-32 / var(--screen-width) * var(--screen-maxwidth)), calc(87 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(-32 / var(--screen-width) * var(--screen-maxwidth)), calc(87 / var(--screen-width) * var(--screen-maxwidth)));
  }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(14 / var(--screen-width) * var(--screen-maxwidth)), calc(-23 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(14 / var(--screen-width) * var(--screen-maxwidth)), calc(-23 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes yd5 {
  0% {
    opacity: 0;
    -webkit-transform: translate(calc(-32 / var(--screen-width) * var(--screen-maxwidth)), calc(87 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(-32 / var(--screen-width) * var(--screen-maxwidth)), calc(87 / var(--screen-width) * var(--screen-maxwidth)));
  }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(14 / var(--screen-width) * var(--screen-maxwidth)), calc(-23 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(14 / var(--screen-width) * var(--screen-maxwidth)), calc(-23 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@-webkit-keyframes yd6 {
  0% {
    opacity: 0;
    -webkit-transform: translate(calc(15 / var(--screen-width) * var(--screen-maxwidth)), calc(120 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(15 / var(--screen-width) * var(--screen-maxwidth)), calc(120 / var(--screen-width) * var(--screen-maxwidth)));
  }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(-24 / var(--screen-width) * var(--screen-maxwidth)), calc(-30 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(-24 / var(--screen-width) * var(--screen-maxwidth)), calc(-30 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes yd6 {
  0% {
    opacity: 0;
    -webkit-transform: translate(calc(15 / var(--screen-width) * var(--screen-maxwidth)), calc(120 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(15 / var(--screen-width) * var(--screen-maxwidth)), calc(120 / var(--screen-width) * var(--screen-maxwidth)));
  }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(-24 / var(--screen-width) * var(--screen-maxwidth)), calc(-30 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(-24 / var(--screen-width) * var(--screen-maxwidth)), calc(-30 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@-webkit-keyframes wz {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, calc(30 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(30 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes wz {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, calc(30 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(30 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
.yun_mask {
  display: block;
  width: 100%;
  height: calc(1080 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/yun_mask.png) no-repeat;
  background-size: cover;
  max-height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 15;
}

.hok_pbox {
  width: calc(432 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: calc(-338 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(106 / var(--screen-width) * var(--screen-maxwidth));
  padding-bottom: calc(12 / var(--screen-width) * var(--screen-maxwidth));
  display: none;
  -webkit-filter: drop-shadow(rgba(36, 36, 36, 0.25) 0 2px 10px);
  filter: drop-shadow(rgba(36, 36, 36, 0.25) 0 2px 10px);
}
.hok_pbox:after {
  content: "";
  width: calc(388 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(12 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/map_hok_pline.png) no-repeat 100%/100%;
  position: absolute;
  right: 0;
  bottom: calc(-12 / var(--screen-width) * var(--screen-maxwidth));
}

.hok_pname {
  display: block;
  font-size: calc(50 / var(--screen-width) * var(--screen-maxwidth));
  color: #fff;
  text-align: right;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff0c6), to(#ffffff));
  background-image: linear-gradient(to bottom, #fff0c6, #ffffff);
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hok_pname_des {
  width: 100%;
  text-align: right;
  font-size: calc(22 / var(--screen-width) * var(--screen-maxwidth));
  color: #ffffff;
  line-height: calc(28.6 / var(--screen-width) * var(--screen-maxwidth));
  letter-spacing: calc(-0.5 / var(--screen-width) * var(--screen-maxwidth));
}

.lang_my .hok_pname, .lang_my .hok_pname_des {
  line-height: 1.6;
}

.hok_part4 {
  width: 100%;
  height: calc(1080 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
  z-index: 30;
  background: url(../img/pt4_bg.jpg) no-repeat #fff;
}
.hok_part4.animate {
  /*.hok_p3{
  	animation: wzs 1s 1 both;
  }
  .hok_news_tit3{
  	animation: wzs 1s 0.3s 1 both;
  }*/
}
.hok_part4.animate .hok_video {
  -webkit-animation: wzs 1s 0.7s 1 both;
  animation: wzs 1s 0.7s 1 both;
}

.hok_pt_logo {
  display: block;
  width: calc(2240 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(1080 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/mulan_logo.png) no-repeat 100%/100%;
  position: absolute;
  left: calc(-160 / var(--screen-width) * var(--screen-maxwidth));
  top: 0;
}

.hok_part4_img {
  display: block;
  width: calc(2240 / var(--screen-width) * var(--screen-maxwidth));
  height: 100%;
  position: absolute;
  left: calc(-160 / var(--screen-width) * var(--screen-maxwidth));
  top: 0;
  z-index: 10;
  /*transform: translate(-50%,0);*/
}

.hok_mask {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 30;
  background-image: url("../img/mulan_mask.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.fallback .hok_mask {
  background-image: url("../img/mulan_mask.png");
}
.webp .hok_mask {
  background-image: url("../img/mulan_mask.webp");
}
.avif .hok_mask {
  background-image: url("../img/mulan_mask.avif");
}

.hok_video {
  width: calc(694 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(694 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/v_box.png) no-repeat 100%/100%;
  position: absolute;
  left: calc(50% + 29 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(257 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 30;
  opacity: 0;
}

.hok_videoin {
  width: calc(660 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(630 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: calc(20 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(30 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/v_img.jpg) no-repeat 100%/100%;
  -webkit-mask-image: url(../img/video_mask.png);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  overflow: hidden;
  border-radius: 30%;
}
.hok_videoin img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.hok_videoin video {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 30;
}
.hok_videoin #player {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../img/v_img.jpg) no-repeat 100%/100%;
}

.playerin {
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}
.playerin video {
  background: #000;
}
.playerin:after {
  content: "";
  width: 100%;
  height: 105%;
  background: url(../img/hero_vmask.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 0;
  top: -4.2222222222%;
  pointer-events: none;
}

/* .hok_pt4_cont.spesf .hok_videoin{
	video{
		left: 30%;
	}
} */
.hok_p3 {
  width: calc(1114 / var(--screen-width) * var(--screen-maxwidth));
  left: calc(50% - 200 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(80 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 40;
  opacity: 1;
}

.hok_news_tit3 {
  width: calc(1114 / var(--screen-width) * var(--screen-maxwidth));
  left: calc(50% - 200 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(128 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 40;
  opacity: 1;
  line-height: unset;
  padding-bottom: calc(15 / var(--screen-width) * var(--screen-maxwidth));
}

.hok_video_tips {
  width: calc(525 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: 0;
  top: calc(720 / var(--screen-width) * var(--screen-maxwidth));
  text-align: center;
  padding-left: calc(110 / var(--screen-width) * var(--screen-maxwidth));
}

.hok_video_name {
  width: 100%;
  text-align: left;
  font-size: calc(50 / var(--screen-width) * var(--screen-maxwidth));
  color: #242424;
  line-height: calc(50 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
  padding-bottom: calc(28 / var(--screen-width) * var(--screen-maxwidth));
}
.hok_video_name:after {
  content: "";
  display: block;
  width: calc(293 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(12 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/carry_nameline.png) no-repeat 100%/100%;
  position: absolute;
  left: 0;
  top: calc(54 / var(--screen-width) * var(--screen-maxwidth));
}
.hok_video_name2 {
  font-size: calc(24 / var(--screen-width) * var(--screen-maxwidth));
  line-height: calc(24 / var(--screen-width) * var(--screen-maxwidth));
  padding-bottom: calc(8 / var(--screen-width) * var(--screen-maxwidth));
}
.hok_video_name2:after {
  display: none;
}

.lang_my .hok_video_name {
  line-height: 1.4;
}
.lang_my .hok_video_name:after {
  top: calc(74 / var(--screen-width) * var(--screen-maxwidth));
}

.hok_video_sx {
  width: 100%;
  text-align: left;
  font-size: calc(28 / var(--screen-width) * var(--screen-maxwidth));
  color: #242424;
  line-height: calc(32 / var(--screen-width) * var(--screen-maxwidth));
}
.hok_video_sx span {
  display: inline-block;
  vertical-align: top;
  width: calc(32 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(32 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/dw_icon.png) no-repeat 100%/100%;
  margin-right: calc(8 / var(--screen-width) * var(--screen-maxwidth));
}
.hok_video_sx span.zs {
  background: url(../img/style_zsicon.png) no-repeat 100%/100%;
}
.hok_video_sx span.fs {
  background: url(../img/style_fsicon.png) no-repeat 100%/100%;
}
.hok_video_sx span.ss {
  background: url(../img/style_ssicon.png) no-repeat 100%/100%;
}
.hok_video_sx span.fz {
  background: url(../img/style_fzicon.png) no-repeat 100%/100%;
}
.hok_video_sx span.tk {
  background: url(../img/style_tkicon.png) no-repeat 100%/100%;
}
.hok_video_sx span.ck {
  background: url(../img/style_ckicon.png) no-repeat 100%/100%;
}
.hok_video_sx em {
  padding: 0 calc(10 / var(--screen-width) * var(--screen-maxwidth)) 0 0;
}

.hok_change_list {
  width: calc(1920 / var(--screen-width) * var(--screen-maxwidth));
  /*max-width: 1920px;*/
  height: calc(146 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  -webkit-transform: translate3d(-50%, 0, 0);
  bottom: 0;
  z-index: 50;
}
.hok_change_list li {
  width: 20%;
  height: calc(146 / var(--screen-width) * var(--screen-maxwidth));
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: calc(18 / var(--screen-width) * var(--screen-maxwidth));
  cursor: pointer;
  line-height: calc(128 / var(--screen-width) * var(--screen-maxwidth));
  text-align: center;
  float: left;
  font-weight: bold;
  background: url(../img/pt4_mr.png) no-repeat 100%/100%;
  position: relative;
  overflow: hidden;
}
.hok_change_list li:after {
  content: "";
  width: calc(5 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(37 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  right: calc(-3 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(65 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/pt4_line.png) no-repeat 100%/100%;
}
.hok_change_list li:last-child:after {
  display: none;
}
.hok_change_list .jbs {
  font-size: calc(22 / var(--screen-width) * var(--screen-maxwidth));
  color: #242424;
  position: relative;
  z-index: 30;
}
.hok_change_list .hok_sx_icon {
  display: inline-block;
  vertical-align: top;
  width: calc(68 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(53 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/hero_icon1.png) no-repeat 100%/100%;
  margin: calc(34 / var(--screen-width) * var(--screen-maxwidth)) calc(6 / var(--screen-width) * var(--screen-maxwidth)) 0 0;
  position: relative;
  z-index: 30;
}
.hok_change_list .hok_sx_icon2 {
  background: url(../img/hero_icon2.png) no-repeat 100%/100%;
}
.hok_change_list .hok_sx_icon3 {
  background: url(../img/hero_icon3.png) no-repeat 100%/100%;
}
.hok_change_list .hok_sx_icon4 {
  background: url(../img/hero_icon4.png) no-repeat 100%/100%;
}
.hok_change_list .hok_sx_icon5 {
  background: url(../img/hero_icon5.png) no-repeat 100%/100%;
}
.hok_change_list li.cur {
  width: 20%;
  height: calc(146 / var(--screen-width) * var(--screen-maxwidth));
}
.hok_change_list li.cur i {
  display: block;
  position: absolute;
  left: calc(-190 / var(--screen-width) * var(--screen-maxwidth));
  bottom: calc(-28 / var(--screen-width) * var(--screen-maxwidth));
  width: 100%;
  height: 100%;
  width: calc(755 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(216 / var(--screen-width) * var(--screen-maxwidth));
  background-image: url("../img/laneani.png");
  background-size: calc(3775 / var(--screen-width) * var(--screen-maxwidth)) calc(2808 / var(--screen-width) * var(--screen-maxwidth));
  background-repeat: no-repeat;
  -webkit-animation-name: lineani;
  animation-name: lineani;
  -webkit-animation-duration: 2.48s;
  animation-duration: 2.48s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: steps(1);
  animation-timing-function: steps(1);
}
.hok_change_list li.cur:after {
  display: none;
}
.hok_change_list li.cur .hok_sx_icon {
  background: url(../img/hero_icon1_cur.png) no-repeat 100%/100%;
}
.hok_change_list li.cur .hok_sx_icon2 {
  background: url(../img/hero_icon2_cur.png) no-repeat 100%/100%;
}
.hok_change_list li.cur .hok_sx_icon3 {
  background: url(../img/hero_icon3_cur.png) no-repeat 100%/100%;
}
.hok_change_list li.cur .hok_sx_icon4 {
  background: url(../img/hero_icon4_cur.png) no-repeat 100%/100%;
}
.hok_change_list li.cur .hok_sx_icon5 {
  background: url(../img/hero_icon5_cur.png) no-repeat 100%/100%;
}
.hok_change_list li.cur .jbs {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffefc4), to(#ffffff));
  background-image: linear-gradient(#ffefc4, #ffffff);
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hok_order {
  height: calc(1066 / var(--screen-width) * var(--screen-maxwidth) - 5vh);
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 1px;
  z-index: 10;
}

.hok_order_bg {
  width: 100%;
  height: calc(1116 / var(--screen-width) * var(--screen-maxwidth));
  min-width: calc(1920 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: 50%;
  top: -5vh;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  z-index: 5;
  background: url(../img/orderpage_bg.jpg) no-repeat top center;
  background-size: 100% 100%;
}

.hok_order_in {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 20;
}

.hok_order_tit {
  display: block;
  width: calc(1100 / var(--screen-width) * var(--screen-maxwidth));
  text-align: center;
  height: auto;
  font-size: calc(70 / var(--screen-width) * var(--screen-maxwidth));
  line-height: calc(77 / var(--screen-width) * var(--screen-maxwidth));
  color: #75521c;
  font-weight: normal;
  position: absolute;
  left: calc(270 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(140 / var(--screen-width) * var(--screen-maxwidth));
}
.hok_order_tit span {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#8d560d), to(#e19815));
  background-image: linear-gradient(#8d560d, #e19815);
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: block;
}
.hok_order_tit:after {
  content: "";
  display: block;
  width: calc(434 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/tit_line3.png) no-repeat 100%/100%;
  margin: calc(20 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
}
.hok_order_tit i {
  font-style: normal;
  font-size: calc(30 / var(--screen-width) * var(--screen-maxwidth));
  line-height: calc(36 / var(--screen-width) * var(--screen-maxwidth));
  color: #242424;
  display: block;
  margin: calc(20 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
  text-align: center;
}

.hok_order_mbox {
  display: none;
}

.order_title {
  text-transform: uppercase;
}

.yao_img {
  display: block;
  width: calc(2240 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(1080 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: 50%;
  top: -5vh;
  margin-left: calc(-666 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 10;
  pointer-events: none;
  background: url(../img/yao_img.png) no-repeat 100%/100%;
}

.hok_partlist {
  width: calc(1020 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: calc(309 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(385 / var(--screen-width) * var(--screen-maxwidth));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.hok_partlist li {
  width: calc(165 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(354 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/parter_bg.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.hok_partlist li.light {
  background: url(../img/order_light_bg.png) no-repeat;
  background-size: 100% 100%;
}
.hok_partlist li.light .hok_order_rw {
  display: block;
}
.hok_partlist li:nth-child(4) .hok_part_jl img {
  width: calc(106 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(94 / var(--screen-width) * var(--screen-maxwidth));
}
.hok_partlist li:nth-child(5) .hok_part_jl img {
  width: calc(95 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(122 / var(--screen-width) * var(--screen-maxwidth));
}
.hok_partlist li:nth-child(1) .hok_part_jl img {
  width: calc(94 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(100 / var(--screen-width) * var(--screen-maxwidth));
}
.hok_partlist li:nth-child(1).light {
  background: url(../img/order_light_bg_cz.png) no-repeat;
  background-size: 100% 100%;
}

.hok_part_jl {
  display: block;
  width: calc(94 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(94 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: calc(106 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(-32 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 30;
}
.hok_part_jl img {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  right: 0;
  bottom: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.hok_part_jl:hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.hok_order_rw {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-mask-image: url(../img/order_mask.png);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  display: none;
}
.hok_order_rw img {
  display: block;
  width: 100%;
  height: 100%;
}

.hok_order_light {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 30;
  background: url(../img/lcb_light.png) no-repeat;
  background-size: 100% 100%;
}

.hok_order_circle {
  display: block;
  width: calc(12 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(12 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/hok_order_circle.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  bottom: calc(30 / var(--screen-width) * var(--screen-maxwidth));
  margin-left: calc(-6 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 10;
}
.hok_order_circle1 {
  -webkit-animation: orderCircle-animate1 1.5s infinite;
  animation: orderCircle-animate1 1.5s infinite;
}
.hok_order_circle2 {
  width: calc(8 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(8 / var(--screen-width) * var(--screen-maxwidth));
  -webkit-animation: orderCircle-animate2 1s 0.5s infinite;
  animation: orderCircle-animate2 1s 0.5s infinite;
}
.hok_order_circle3 {
  width: calc(4 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(4 / var(--screen-width) * var(--screen-maxwidth));
  -webkit-animation: orderCircle-animate3 1s 0.8s infinite;
  animation: orderCircle-animate3 1s 0.8s infinite;
}
.hok_order_circle4 {
  width: calc(6 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(6 / var(--screen-width) * var(--screen-maxwidth));
  -webkit-animation: orderCircle-animate4 1s 1s infinite;
  animation: orderCircle-animate4 1s 1s infinite;
}
.hok_order_circle5 {
  width: calc(12 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(12 / var(--screen-width) * var(--screen-maxwidth));
  -webkit-animation: orderCircle-animate5 2s 0.2s infinite;
  animation: orderCircle-animate5 2s 0.2s infinite;
}

@-webkit-keyframes orderCircle-animate1 {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(-24 / var(--screen-width) * var(--screen-maxwidth)), calc(-30 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(-24 / var(--screen-width) * var(--screen-maxwidth)), calc(-30 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes orderCircle-animate1 {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(-24 / var(--screen-width) * var(--screen-maxwidth)), calc(-30 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(-24 / var(--screen-width) * var(--screen-maxwidth)), calc(-30 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@-webkit-keyframes orderCircle-animate2 {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(-8 / var(--screen-width) * var(--screen-maxwidth)), calc(-30 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(-8 / var(--screen-width) * var(--screen-maxwidth)), calc(-30 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes orderCircle-animate2 {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(-8 / var(--screen-width) * var(--screen-maxwidth)), calc(-30 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(-8 / var(--screen-width) * var(--screen-maxwidth)), calc(-30 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@-webkit-keyframes orderCircle-animate3 {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(-2 / var(--screen-width) * var(--screen-maxwidth)), calc(-20 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(-2 / var(--screen-width) * var(--screen-maxwidth)), calc(-20 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes orderCircle-animate3 {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(-2 / var(--screen-width) * var(--screen-maxwidth)), calc(-20 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(-2 / var(--screen-width) * var(--screen-maxwidth)), calc(-20 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@-webkit-keyframes orderCircle-animate4 {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(6 / var(--screen-width) * var(--screen-maxwidth)), calc(-40 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(6 / var(--screen-width) * var(--screen-maxwidth)), calc(-40 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes orderCircle-animate4 {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(6 / var(--screen-width) * var(--screen-maxwidth)), calc(-40 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(6 / var(--screen-width) * var(--screen-maxwidth)), calc(-40 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@-webkit-keyframes orderCircle-animate5 {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(20 / var(--screen-width) * var(--screen-maxwidth)), calc(-40 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(20 / var(--screen-width) * var(--screen-maxwidth)), calc(-40 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes orderCircle-animate5 {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(20 / var(--screen-width) * var(--screen-maxwidth)), calc(-40 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(20 / var(--screen-width) * var(--screen-maxwidth)), calc(-40 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
.hok_order_check {
  display: block;
  width: calc(62 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(37 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/hok_order_check.png) no-repeat 100%/100%;
  position: absolute;
  left: 50%;
  bottom: calc(80 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 50;
  margin-left: calc(-26 / var(--screen-width) * var(--screen-maxwidth));
}

.hok_jname {
  display: block;
  width: 100%;
  text-align: center;
  font-size: calc(26 / var(--screen-width) * var(--screen-maxwidth));
  color: #3d3b38;
  position: absolute;
  left: 0;
  top: calc(62 / var(--screen-width) * var(--screen-maxwidth));
  font-weight: normal;
  z-index: 30;
}

.hok_jname_tips {
  width: 100%;
  text-align: center;
  font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  color: #c57438;
  position: absolute;
  left: 0;
  top: calc(96 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 30;
}

.hok_squad_btn {
  display: block;
  width: calc(446 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(105 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/squad_btn.png) no-repeat 100%/100%;
  position: absolute;
  left: calc(596 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(830 / var(--screen-width) * var(--screen-maxwidth));
  text-align: center;
  font-size: calc(24 / var(--screen-width) * var(--screen-maxwidth));
  color: #eee8bf;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-transform: uppercase;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-bottom: calc(14 / var(--screen-width) * var(--screen-maxwidth));
}
.hok_squad_btn span {
  display: block;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefb), to(#f1ecc9));
  background-image: linear-gradient(#fefefb, #f1ecc9);
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-filter: drop-shadow(#c05323 0 0 5px);
  filter: drop-shadow(#c05323 0 0 5px);
}
.hok_squad_btn:hover {
  background: url(../img/squad_btn_hover.png) no-repeat 100%/100%;
  -webkit-filter: brightness(1);
  filter: brightness(1);
}
.hok_squad_btn:active {
  background: url(../img/squad_btn_active.png) no-repeat 100%/100%;
  -webkit-filter: brightness(1);
  filter: brightness(1);
}

.pcs .float_code {
  display: block;
  width: calc(148 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(155 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: 50%;
  bottom: calc(-160 / var(--screen-width) * var(--screen-maxwidth));
  margin-left: calc(-74 / var(--screen-width) * var(--screen-maxwidth));
  display: none;
}
.pcs .float_code img {
  display: block;
  width: 100%;
  height: 100%;
}

@-webkit-keyframes floaticon {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes floaticon {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.hok_lottery {
  position: relative;
  width: 100%;
  height: calc(1160 / var(--screen-width) * 100vw);
  margin-top: -5vh;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: calc(195 / var(--screen-width) * 100vw);
}
.hok_lottery ~ .hok_news {
  background: none;
}
.hok_lottery .bg {
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: calc(2240 / var(--screen-width) * 100vw);
  z-index: 0;
}
.hok_lottery .title {
  display: block;
  width: 100%;
  text-align: center;
  color: #75521c;
  font-weight: normal;
  position: relative;
}
.hok_lottery .title h1 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#8d560d), to(#ad7e2b));
  background-image: linear-gradient(#8d560d, #ad7e2b);
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: block;
  font-size: calc(70 / var(--screen-width) * var(--screen-maxwidth));
  line-height: calc(70 / var(--screen-width) * var(--screen-maxwidth));
}
.hok_lottery .title h2 {
  font-size: calc(30 / var(--screen-width) * 100vw);
  color: #242424;
  font-weight: bold;
  line-height: 1;
  margin-top: calc(25 / var(--screen-width) * 100vw);
  padding-bottom: calc(25 / var(--screen-width) * 100vw);
}
.hok_lottery .title:after {
  content: "";
  width: calc(434 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/tit_line3.png) no-repeat 100%/100%;
  position: absolute;
  left: 50%;
  bottom: calc(-8 / var(--screen-width) * var(--screen-maxwidth));
  margin-left: calc(-217 / var(--screen-width) * var(--screen-maxwidth));
}
.hok_lottery .title2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: calc(25 / var(--screen-width) * 100vw);
  color: #ad7e2b;
  margin-top: calc(20 / var(--screen-width) * 100vw);
  position: relative;
}
.hok_lottery .title2 img {
  width: calc(53 / var(--screen-width) * 100vw);
}
.hok_lottery .title2 img:last-of-type {
  width: calc(58 / var(--screen-width) * 100vw);
  margin-left: calc(10 / var(--screen-width) * 100vw);
}
.hok_lottery .prize {
  height: calc(470 / var(--screen-width) * 100vw);
}
.hok_lottery .btn {
  width: calc(408 / var(--screen-width) * 100vw);
  margin: 0 auto;
  position: relative;
  cursor: pointer;
}
.hok_lottery .btn.mobile {
  display: none;
}
.hok_lottery .btn:hover {
  -webkit-filter: drop-shadow(rgba(255, 247, 192, 0.6) 0 0 4px) drop-shadow(rgba(255, 247, 192, 0.6) 0 0 4px) drop-shadow(rgba(255, 247, 192, 0.6) 0 0 4px);
  filter: drop-shadow(rgba(255, 247, 192, 0.6) 0 0 4px) drop-shadow(rgba(255, 247, 192, 0.6) 0 0 4px) drop-shadow(rgba(255, 247, 192, 0.6) 0 0 4px);
}
.hok_lottery .btn:hover .qrcode {
  display: block;
}
.hok_lottery .btn img {
  width: 100%;
}
.hok_lottery .tips {
  font-size: calc(22 / var(--screen-width) * 100vw);
  position: relative;
  text-align: center;
  font-weight: normal;
  line-height: 1;
  margin-top: calc(20 / var(--screen-width) * 100vw);
  color: #6c5533;
}
.hok_lottery .tips span {
  display: block;
  font-size: calc(16 / var(--screen-width) * 100vw);
  margin-top: calc(9 / var(--screen-width) * 100vw);
  color: #b9ab96;
}

@media screen and (max-width: 900px) {
  .hok_lottery {
    height: calc(1222 / var(--screen-width3) * var(--screen-maxwidth));
    background: url(../img/lottery-bg-m.jpg) no-repeat;
    background-size: 100% auto;
    margin-top: 0;
    padding-top: calc(60 / var(--screen-width3) * var(--screen-maxwidth));
  }
  .hok_lottery .bg {
    display: none;
  }
  .hok_lottery .title h1 {
    font-size: calc(48 / var(--screen-width3) * var(--screen-maxwidth));
  }
  .hok_lottery .title h2 {
    margin-top: calc(12 / var(--screen-width3) * var(--screen-maxwidth));
    font-size: calc(24 / var(--screen-width3) * var(--screen-maxwidth));
    padding-bottom: calc(17 / var(--screen-width3) * var(--screen-maxwidth));
  }
  .hok_lottery .title::after {
    content: "";
    width: calc(690 / var(--screen-width3) * var(--screen-maxwidth));
    height: calc(16 / var(--screen-width3) * var(--screen-maxwidth));
    background: url(../img/m_tit_line3.png) no-repeat 100%/100%;
    margin-left: calc(-345 / var(--screen-width3) * var(--screen-maxwidth));
  }
  .hok_lottery .title2 {
    font-size: calc(24 / var(--screen-width3) * var(--screen-maxwidth));
    margin-top: calc(23 / var(--screen-width3) * var(--screen-maxwidth));
  }
  .hok_lottery .title2 img {
    width: calc(57 / var(--screen-width3) * var(--screen-maxwidth));
  }
  .hok_lottery .title2 img:last-of-type {
    width: calc(68 / var(--screen-width3) * var(--screen-maxwidth));
  }
  .hok_lottery .prize {
    height: calc(743 / var(--screen-width3) * var(--screen-maxwidth));
  }
  .hok_lottery .btn {
    width: calc(348 / var(--screen-width3) * var(--screen-maxwidth));
    display: none;
  }
  .hok_lottery .btn.mobile {
    display: block;
  }
  .hok_lottery .btn .qrcode {
    display: none !important;
  }
  .hok_lottery .tips {
    text-align: left;
    color: #ffffff;
    font-size: calc(16 / var(--screen-width3) * var(--screen-maxwidth));
    padding-left: calc(16 / var(--screen-width3) * var(--screen-maxwidth));
    position: absolute;
    left: 0;
    bottom: calc(25 / var(--screen-width3) * var(--screen-maxwidth));
  }
  .hok_lottery .tips span {
    font-size: calc(12 / var(--screen-width3) * var(--screen-maxwidth));
    color: #f6eacd;
  }
  .hok_lottery ~ .hok_news {
    background: url(../img/mnews_bg.jpg) no-repeat #fff;
    background-size: 100% auto;
  }
}
.hok_milepost {
  width: 100%;
  height: calc(1130 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 1px;
  margin-top: calc(-48 / var(--screen-width) * var(--screen-maxwidth));
}

.hok_milepost_bg {
  width: calc(2240 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(1130 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/milepost_bg.jpg) no-repeat bottom center;
  background-size: 100% auto;
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  z-index: 0;
}

.hok_milepost_in {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 30;
}

.hok_milepost_ying {
  display: block;
  width: calc(582 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(1134 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/ying_msimg.png) no-repeat 100%/100%;
  position: absolute;
  left: calc(160 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(70 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 5;
  pointer-events: none;
}

.hok_milepost_tit {
  left: calc(700 / var(--screen-width) * var(--screen-maxwidth));
}

.milepost_prg {
  width: calc(1072 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(12 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: calc(716 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(430 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 30;
  background: url(../img/milepost_prg.png) no-repeat 100%/100%;
}

.milepost_prg_in {
  width: calc(966 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(12 / var(--screen-width) * var(--screen-maxwidth));
  margin: 0 auto;
  position: relative;
}
.milepost_prg_in span {
  display: block;
  width: 0%;
  height: calc(12 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: 0;
  top: 0;
  background: url(../img/milepost_prg_in.png) no-repeat;
  background-size: calc(966 / var(--screen-width) * var(--screen-maxwidth)) calc(12 / var(--screen-width) * var(--screen-maxwidth));
}
.milepost_prg_in span:after {
  content: "";
  width: calc(23 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(55 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/mi_light.png) no-repeat 100%/100%;
  position: absolute;
  right: calc(-12.5 / var(--screen-width) * var(--screen-maxwidth));
  top: 50%;
  margin-top: calc(-27.5 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 30;
}

.milepost_prg_list {
  width: calc(816 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: 50%;
  top: calc(-16 / var(--screen-width) * var(--screen-maxwidth));
  margin-left: calc(-408 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 30;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.milepost_prg_list li {
  width: calc(173 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(390 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/prg_bsg.png) no-repeat 100%/100%;
  position: relative;
}
.milepost_prg_list li.light {
  background: url(../img/prg_cur.png) no-repeat 100%/100%;
}
.milepost_prg_list li.light .milepost_prg_top strong {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#38322d), to(#693209));
  background-image: linear-gradient(#38322d, #693209);
}
.milepost_prg_list li.light .milepost_num {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fffdf8), to(#ffe7a9));
  background-image: linear-gradient(#fffdf8, #ffe7a9);
}
.milepost_prg_list li.light .milepost_para {
  color: #ffffff;
}
.milepost_prg_list li.light .milepost_light_lz {
  display: block;
}

.milepost_prg_top {
  width: calc(310 / var(--screen-width) * var(--screen-maxwidth));
  text-align: center;
  font-size: calc(20 / var(--screen-width) * var(--screen-maxwidth));
  color: #896f4b;
  position: absolute;
  left: 50%;
  top: calc(-96 / var(--screen-width) * var(--screen-maxwidth));
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.milepost_prg_top span {
  display: block;
  text-align: center;
}
.milepost_prg_top strong {
  display: block;
  text-align: center;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#8d560d), to(#e19815));
  background-image: linear-gradient(#8d560d, #e19815);
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  font-size: calc(50 / var(--screen-width) * var(--screen-maxwidth));
  line-height: calc(54 / var(--screen-width) * var(--screen-maxwidth));
}

.milepost_prg_img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.milepost_prg_img:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.milepost_num {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  top: calc(210 / var(--screen-width) * var(--screen-maxwidth));
  font-size: calc(34 / var(--screen-width) * var(--screen-maxwidth));
  color: #ad8230;
  font-weight: bold;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#8d560d), to(#e19815));
  background-image: linear-gradient(#8d560d, #e19815);
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.milepost_num span {
  font-size: calc(20 / var(--screen-width) * var(--screen-maxwidth));
}

.milepost_para {
  width: 100%;
  height: calc(54 / var(--screen-width) * var(--screen-maxwidth));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  position: absolute;
  left: 0;
  top: calc(250 / var(--screen-width) * var(--screen-maxwidth));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(20 / var(--screen-width) * var(--screen-maxwidth));
  color: #242424;
  line-height: calc(18 / var(--screen-width) * var(--screen-maxwidth));
}

.milepost_light_lz {
  width: calc(24 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(24 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: 50%;
  top: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  margin-left: calc(-12 / var(--screen-width) * var(--screen-maxwidth));
  display: none;
}
.milepost_light_lz span {
  display: block;
  width: calc(12 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(12 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/hok_order_circle.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: calc(-6 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 10;
}

.mile_lz1 {
  -webkit-animation: orderCircle-animate1 1.5s infinite;
  animation: orderCircle-animate1 1.5s infinite;
}
.mile_lz2 {
  width: calc(8 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(8 / var(--screen-width) * var(--screen-maxwidth));
  -webkit-animation: orderCircle-animate2 1s 0.5s infinite;
  animation: orderCircle-animate2 1s 0.5s infinite;
}
.mile_lz3 {
  width: calc(4 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(4 / var(--screen-width) * var(--screen-maxwidth));
  -webkit-animation: orderCircle-animate3 1s 0.8s infinite;
  animation: orderCircle-animate3 1s 0.8s infinite;
}
.mile_lz4 {
  width: calc(6 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(6 / var(--screen-width) * var(--screen-maxwidth));
  -webkit-animation: orderCircle-animate4 1s 1s infinite;
  animation: orderCircle-animate4 1s 1s infinite;
}
.mile_lz5 {
  width: calc(12 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(12 / var(--screen-width) * var(--screen-maxwidth));
  -webkit-animation: orderCircle-animate5 2s 0.2s infinite;
  animation: orderCircle-animate5 2s 0.2s infinite;
}

.lang_br .milepost_para {
  font-size: calc(18 / var(--screen-width) * var(--screen-maxwidth));
}

.milepost_picon {
  display: block;
  width: calc(28 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(34 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: 50%;
  top: calc(312 / var(--screen-width) * var(--screen-maxwidth));
  margin-left: calc(-14 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 20;
  background: url(../img/prglock.png) no-repeat 100%/100%;
}

.milepost_pcheck {
  display: block;
  width: calc(53 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(29 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: 50%;
  top: calc(312 / var(--screen-width) * var(--screen-maxwidth));
  margin-left: calc(-26.5 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 20;
  background: url(../img/prg_check.png) no-repeat 100%/100%;
}

.milepost_store {
  width: calc(1072 / var(--screen-width) * var(--screen-maxwidth));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  left: calc(716 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(846 / var(--screen-width) * var(--screen-maxwidth));
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.milepost_store .milepost_st {
  height: calc(52 / var(--screen-width) * var(--screen-maxwidth));
  width: calc(177 / var(--screen-width) * var(--screen-maxwidth));
  margin: 0 calc(6 / var(--screen-width) * var(--screen-maxwidth));
}
.milepost_store .milepost_st a {
  display: block;
  height: calc(52 / var(--screen-width) * var(--screen-maxwidth));
  width: calc(177 / var(--screen-width) * var(--screen-maxwidth));
}
.milepost_store .milepost_st a:hover {
  -webkit-filter: drop-shadow(rgba(255, 247, 192, 0.6) 0 0 4px) drop-shadow(rgba(255, 247, 192, 0.6) 0 0 4px) drop-shadow(rgba(255, 247, 192, 0.6) 0 0 4px);
  filter: drop-shadow(rgba(255, 247, 192, 0.6) 0 0 4px) drop-shadow(rgba(255, 247, 192, 0.6) 0 0 4px) drop-shadow(rgba(255, 247, 192, 0.6) 0 0 4px);
}
.milepost_store .milepost_st:nth-child(3) {
  width: calc(194 / var(--screen-width) * var(--screen-maxwidth));
}
.milepost_store .milepost_st:nth-child(3) img {
  width: calc(194 / var(--screen-width) * var(--screen-maxwidth));
}
.milepost_store img {
  display: block;
  height: calc(52 / var(--screen-width) * var(--screen-maxwidth));
  width: calc(177 / var(--screen-width) * var(--screen-maxwidth));
}

.milepost_tips_para {
  width: calc(1072 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: calc(716 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(934 / var(--screen-width) * var(--screen-maxwidth));
  font-size: calc(24 / var(--screen-width) * var(--screen-maxwidth));
  color: #242424;
  text-align: center;
}

.hok_order,
.hok_milepost,
.hok_lottery {
  display: none;
}

.lang_br .hok_order,
.lang_br .hok_milepost,
.lang_br .hok_lottery {
  display: block;
}

@media screen and (min-width: 1200px) {
  .hok_change_list li:hover {
    width: 20%;
    height: calc(146 / var(--screen-width) * var(--screen-maxwidth));
    background-image: url("../img/hero_hovs.png");
    background-size: calc(384 / var(--screen-width) * var(--screen-maxwidth)) calc(145 / var(--screen-width) * var(--screen-maxwidth));
  }
  .hok_change_list li:hover i {
    background-position: 0 0;
    -webkit-animation: none;
    animation: none;
    -webkit-animation-name: unset;
    animation-name: unset;
    -webkit-animation-duration: unset;
    animation-duration: unset;
    -webkit-animation-delay: unset;
    animation-delay: unset;
    -webkit-animation-iteration-count: unset;
    animation-iteration-count: unset;
    -webkit-animation-fill-mode: unset;
    animation-fill-mode: unset;
    -webkit-animation-timing-function: unset;
    animation-timing-function: unset;
    background: none;
  }
  .hok_change_list li:hover:after {
    display: none;
  }
  .hok_change_list li:hover .hok_sx_icon {
    background: url(../img/hero_icon1_cur.png) no-repeat 100%/100%;
  }
  .hok_change_list li:hover .hok_sx_icon2 {
    background: url(../img/hero_icon2_cur.png) no-repeat 100%/100%;
  }
  .hok_change_list li:hover .hok_sx_icon3 {
    background: url(../img/hero_icon3_cur.png) no-repeat 100%/100%;
  }
  .hok_change_list li:hover .hok_sx_icon4 {
    background: url(../img/hero_icon4_cur.png) no-repeat 100%/100%;
  }
  .hok_change_list li:hover .hok_sx_icon5 {
    background: url(../img/hero_icon5_cur.png) no-repeat 100%/100%;
  }
  .hok_change_list li:hover .jbs {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffefc4), to(#ffffff));
    background-image: linear-gradient(#ffefc4, #ffffff);
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.hok_part5 {
  width: 100%;
  height: calc(1419 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
  background: url(../img/pt5.jpg) no-repeat 100%/100%;
  z-index: 30;
  padding-top: calc(1 / var(--screen-width) * var(--screen-maxwidth));
  overflow: hidden;
}
.hok_part5.animate {
  /*.hok_p5{
  	animation: wzs 1s 1 both;
  }
  .hok_news_tit5{
  	animation: wzs 1s 0.3s 1 both;
  }
  .p5_more_btn{
  	animation: wzs 1s 0.7s 1 both;
  }
  .hok_soon{
  	animation: wzs 1s 0.7s 1 both;
  }
  .hero_change_box{
  	animation: wzs 1s 1s 1 both;
  }*/
}

.hok_p5 {
  top: calc(138 / var(--screen-width) * var(--screen-maxwidth));
  opacity: 1;
}

.hok_news_tit5 {
  top: calc(186 / var(--screen-width) * var(--screen-maxwidth));
  opacity: 1;
}

.p5_more_btn {
  /*opacity: 0;*/
  position: absolute;
  left: 50%;
  top: calc(350 / var(--screen-width) * var(--screen-maxwidth));
  margin-left: calc(-110 / var(--screen-width) * var(--screen-maxwidth));
}

.hero_change_box {
  /*opacity: 0;*/
  width: 100%;
  height: calc(1299 / var(--screen-width) * var(--screen-maxwidth));
  /*-webkit-mask-image:url(../img/herobg_mask.png);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size:90% 90%;*/
  -webkit-mask-position: center center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: calc(425 / var(--screen-width) * var(--screen-maxwidth));
  padding-bottom: calc(70 / var(--screen-width) * var(--screen-maxwidth));
  /*margin: calc(234 / var(--screen-width) * var(--screen-maxwidth)) auto 0;*/
  text-align: center;
  font-size: 0;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
}
.hero_change_box > div {
  display: inline-block;
  width: calc(222 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(710 / var(--screen-width) * var(--screen-maxwidth));
  /*overflow: hidden;*/
  position: relative;
  /*transform: translate(0,calc(-120 / var(--screen-width) * var(--screen-maxwidth)));*/
  margin: 0 calc(12 / var(--screen-width) * var(--screen-maxwidth));
}
.hero_change_box > div ul {
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.hero_change_box > div:nth-child(1) ul {
  -webkit-animation-name: v-marquee-top;
  animation-name: v-marquee-top;
  -webkit-animation-duration: 63s;
  animation-duration: 63s;
}
.hero_change_box > div:nth-child(2) ul {
  -webkit-animation-name: v-marquee-bot;
  animation-name: v-marquee-bot;
  -webkit-animation-duration: 63s;
  animation-duration: 63s;
}
.hero_change_box > div:nth-child(3) ul {
  -webkit-animation-name: v-marquee-top;
  animation-name: v-marquee-top;
  -webkit-animation-duration: 72s;
  animation-duration: 72s;
}
.hero_change_box > div:nth-child(4) ul {
  -webkit-animation-name: v-marquee-bot;
  animation-name: v-marquee-bot;
  -webkit-animation-duration: 72s;
  animation-duration: 72s;
}
.hero_change_box > div:nth-child(5) ul {
  -webkit-animation-name: v-marquee-top;
  animation-name: v-marquee-top;
  -webkit-animation-duration: 72s;
  animation-duration: 72s;
}
.hero_change_box > div:nth-child(6) ul {
  -webkit-animation-name: v-marquee-bot;
  animation-name: v-marquee-bot;
  -webkit-animation-duration: 63s;
  animation-duration: 63s;
}
.hero_change_box > div:nth-child(7) ul {
  -webkit-animation-name: v-marquee-top;
  animation-name: v-marquee-top;
  -webkit-animation-duration: 63s;
  animation-duration: 63s;
}
.hero_change_box > div.hlist1box {
  -webkit-transform: translate(0, calc(-115 / var(--screen-width) * var(--screen-maxwidth)));
  transform: translate(0, calc(-115 / var(--screen-width) * var(--screen-maxwidth)));
}
.hero_change_box > div.hlist2box {
  -webkit-transform: translate(0, calc(115 / var(--screen-width) * var(--screen-maxwidth)));
  transform: translate(0, calc(115 / var(--screen-width) * var(--screen-maxwidth)));
}
.hero_change_box > div:hover {
  z-index: 200;
}
.hero_change_box > div li {
  cursor: pointer;
}
.hero_change_box .hlistin {
  width: calc(222 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(710 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: calc(-111 / var(--screen-width) * var(--screen-maxwidth));
  overflow: hidden;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(15%, rgb(0, 0, 0)), color-stop(85%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0, 0, 0) 15%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
}
.hero_change_box .hlistin:hover {
  width: calc(300 / var(--screen-width) * var(--screen-maxwidth));
  margin-left: calc(-150 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 100;
}
.hero_change_box ul {
  width: calc(218 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 10;
  padding-top: calc(1 / var(--screen-width) * var(--screen-maxwidth));
  -webkit-animation: pmchangetop 15s linear infinite;
  animation: pmchangetop 15s linear infinite;
  margin: 0 auto;
}
.hero_change_box ul li {
  width: calc(218 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(209 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
  margin: 0 auto calc(24 / var(--screen-width) * var(--screen-maxwidth));
}
.hero_change_box ul li:hover {
  z-index: 50;
}
.hero_change_box ul li:hover .hero_sxicon,
.hero_change_box ul li:hover .hero_zy {
  opacity: 1;
}
.hero_change_box ul li:hover .hero_sxicon {
  right: unset;
  top: calc(32 / var(--screen-width) * var(--screen-maxwidth));
  left: calc(7 / var(--screen-width) * var(--screen-maxwidth));
}
.hero_change_box ul li:hover .hero_sxicon2 {
  top: calc(78 / var(--screen-width) * var(--screen-maxwidth));
}
.hero_change_box ul li:hover .hero_wp {
  width: calc(283 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(281 / var(--screen-width) * var(--screen-maxwidth));
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: calc(10 / var(--screen-width) * var(--screen-maxwidth)) calc(10 / var(--screen-width) * var(--screen-maxwidth)) calc(20 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/hero_hov.png) no-repeat 100%/100%;
  /*&:after{
  	width: calc(284 / var(--screen-width) * var(--screen-maxwidth));
  	height: calc(281 / var(--screen-width) * var(--screen-maxwidth));
  	background: url(../img/hero_hov.png) no-repeat 100%/100%;
  	margin-top: calc(5 / var(--screen-width) * var(--screen-maxwidth));
  }*/
}
.hero_change_box ul li:hover .hero_sx_name {
  display: block;
}
.hero_change_box ul li:hover img {
  display: block;
  width: 100%;
  height: auto;
}
.hero_change_box ul li:nth-child(1) {
  /*margin-top: calc(-299 / var(--screen-width) * var(--screen-maxwidth));*/
}

@-webkit-keyframes pmchangetop1 {
  0% {
    /*margin-top: calc(-299 / var(--screen-width) * var(--screen-maxwidth));*/
    -webkit-transform: translate(0, calc(-1631 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-1631 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(-3262 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-3262 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes pmchangetop1 {
  0% {
    /*margin-top: calc(-299 / var(--screen-width) * var(--screen-maxwidth));*/
    -webkit-transform: translate(0, calc(-1631 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-1631 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(-3262 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-3262 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@-webkit-keyframes pmchangetop2 {
  0% {
    /*margin-top: calc(-299 / var(--screen-width) * var(--screen-maxwidth));*/
    -webkit-transform: translate(0, calc(-1165 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-1165 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(-2330 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-2330 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes pmchangetop2 {
  0% {
    /*margin-top: calc(-299 / var(--screen-width) * var(--screen-maxwidth));*/
    -webkit-transform: translate(0, calc(-1165 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-1165 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(-2330 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-2330 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@-webkit-keyframes v-marquee-top {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
  }
}
@keyframes v-marquee-top {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
  }
}
@-webkit-keyframes v-marquee-bot {
  0% {
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes v-marquee-bot {
  0% {
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-webkit-keyframes pmchangetop-9n {
  0% {
    -webkit-transform: translate(0, calc(0 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(0 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(-1848 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-1848 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes pmchangetop-9n {
  0% {
    -webkit-transform: translate(0, calc(0 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(0 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(-1848 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-1848 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@-webkit-keyframes pmchangetop-9n2 {
  0% {
    -webkit-transform: translate(0, calc(0 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(0 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(-1617 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-1617 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes pmchangetop-9n2 {
  0% {
    -webkit-transform: translate(0, calc(0 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(0 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(-1617 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-1617 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@-webkit-keyframes pmchangetop3 {
  0% {
    /*margin-top: calc(-299 / var(--screen-width) * var(--screen-maxwidth));*/
    -webkit-transform: translate(0, calc(-2097 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-2097 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(-4194 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-4194 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes pmchangetop3 {
  0% {
    /*margin-top: calc(-299 / var(--screen-width) * var(--screen-maxwidth));*/
    -webkit-transform: translate(0, calc(-2097 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-2097 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(-4194 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-4194 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@-webkit-keyframes pmchangetop4 {
  0% {
    /*margin-top: calc(-299 / var(--screen-width) * var(--screen-maxwidth));*/
    -webkit-transform: translate(0, calc(-1398 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-1398 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(-2796 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-2796 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes pmchangetop4 {
  0% {
    /*margin-top: calc(-299 / var(--screen-width) * var(--screen-maxwidth));*/
    -webkit-transform: translate(0, calc(-1398 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-1398 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(-2796 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-2796 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@-webkit-keyframes pmchangebot1 {
  0% {
    -webkit-transform: translate(0, calc(-4194 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-4194 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(-2097 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-2097 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes pmchangebot1 {
  0% {
    -webkit-transform: translate(0, calc(-4194 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-4194 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(-2097 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-2097 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@-webkit-keyframes pmchangebot-9n {
  0% {
    -webkit-transform: translate(0, calc(-1848 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-1848 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(0 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(0 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes pmchangebot-9n {
  0% {
    -webkit-transform: translate(0, calc(-1848 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-1848 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(0 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(0 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@-webkit-keyframes pmchangebot-9n2 {
  0% {
    -webkit-transform: translate(0, calc(-1617 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-1617 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(0 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(0 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes pmchangebot-9n2 {
  0% {
    -webkit-transform: translate(0, calc(-1617 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-1617 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(0 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(0 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@-webkit-keyframes pmchangebot2 {
  0% {
    -webkit-transform: translate(0, calc(-3262 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-3262 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(-1631 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-1631 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes pmchangebot2 {
  0% {
    -webkit-transform: translate(0, calc(-3262 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-3262 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(-1631 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-1631 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@-webkit-keyframes pmchangetop {
  0% {
    /*margin-top: calc(-299 / var(--screen-width) * var(--screen-maxwidth));*/
    -webkit-transform: translate(0, calc(-299 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-299 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(-998 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-998 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes pmchangetop {
  0% {
    /*margin-top: calc(-299 / var(--screen-width) * var(--screen-maxwidth));*/
    -webkit-transform: translate(0, calc(-299 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-299 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(-998 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-998 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@-webkit-keyframes pmchangebot {
  0% {
    -webkit-transform: translate(0, calc(-998 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-998 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(-299 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-299 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes pmchangebot {
  0% {
    -webkit-transform: translate(0, calc(-998 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-998 / var(--screen-width) * var(--screen-maxwidth)));
  }
  100% {
    -webkit-transform: translate(0, calc(-299 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(0, calc(-299 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
.hero_wp {
  display: block;
  width: calc(218 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(218 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  background: url(../img/hero_kk.png) no-repeat 100%/100%;
  padding: 1px 1px 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /*&:after{	}*/
}

.hero_change_img {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url(../img/hero_mask.png);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  overflow: hidden;
  position: relative;
}
.hero_change_img img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero_sx_name {
  display: none;
  width: 200%;
  height: calc(125 / var(--screen-width) * var(--screen-maxwidth));
  line-height: calc(30 / var(--screen-width) * var(--screen-maxwidth));
  text-align: center;
  font-size: calc(24 / var(--screen-width) * var(--screen-maxwidth));
  color: #ffffff;
  font-weight: bold;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(19, 19, 19, 0.8)), to(rgba(19, 19, 19, 0)));
  background: linear-gradient(to top, rgba(19, 19, 19, 0.8), rgba(19, 19, 19, 0));
  position: absolute;
  left: -50%;
  bottom: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: calc(34 / var(--screen-width) * var(--screen-maxwidth));
  white-space: nowrap;
}
.hero_sx_name span {
  display: inline-block;
  vertical-align: top;
  min-width: 30%;
}
.hero_sx_name:before {
  content: "";
  display: inline-block;
  width: calc(20 / var(--screen-width) * var(--screen-maxwidth));
  height: 0;
  border-top: rgba(255, 255, 255, 0.4) solid 1px;
  vertical-align: top;
  margin: calc(15 / var(--screen-width) * var(--screen-maxwidth)) calc(6 / var(--screen-width) * var(--screen-maxwidth)) 0;
}
.hero_sx_name:after {
  content: "";
  display: inline-block;
  width: calc(20 / var(--screen-width) * var(--screen-maxwidth));
  height: 0;
  border-top: rgba(255, 255, 255, 0.4) solid 1px;
  vertical-align: top;
  margin: calc(15 / var(--screen-width) * var(--screen-maxwidth)) calc(6 / var(--screen-width) * var(--screen-maxwidth)) 0;
}
.hero_sx_name2 {
  font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  bottom: calc(24 / var(--screen-width) * var(--screen-maxwidth));
  background: none;
  font-weight: normal;
}
.hero_sx_name2:before, .hero_sx_name2:after {
  display: none;
}

.lang_es .hero_sx_name {
  font-size: calc(20 / var(--screen-width) * var(--screen-maxwidth));
}

.hero_sx_tips {
  position: absolute;
  left: calc(12 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(8 / var(--screen-width) * var(--screen-maxwidth));
  width: 200%;
  text-align: left;
  font-size: calc(40 / var(--screen-width) * var(--screen-maxwidth));
  line-height: calc(40 / var(--screen-width) * var(--screen-maxwidth));
  color: #ffffff;
  /* opacity: 0; */
  -webkit-filter: drop-shadow(#01022c 0 1px 8px);
  filter: drop-shadow(#01022c 0 1px 8px);
  white-space: nowrap;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.hero_sxicon {
  display: inline-block;
  vertical-align: top;
  width: calc(26 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(26 / var(--screen-width) * var(--screen-maxwidth));
  margin-right: calc(10 / var(--screen-width) * var(--screen-maxwidth));
  margin-left: calc(10 / var(--screen-width) * var(--screen-maxwidth));
  margin-top: calc(6 / var(--screen-width) * var(--screen-maxwidth));
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 0;
}
.hero_sxicon2 {
  top: calc(78 / var(--screen-width) * var(--screen-maxwidth));
}
.hero_sxicon.ss, .hero_sxicon.Marksman, .hero_sxicon.marksman {
  background: url(../img/ss_icon.png) no-repeat 100%/100%;
}
.hero_sxicon.ck, .hero_sxicon.Assassin, .hero_sxicon.assassin {
  background: url(../img/ck_icon.png) no-repeat 100%/100%;
}
.hero_sxicon.fz, .hero_sxicon.Support, .hero_sxicon.support {
  background: url(../img/fz_icon.png) no-repeat 100%/100%;
}
.hero_sxicon.tk, .hero_sxicon.Tank, .hero_sxicon.tank {
  background: url(../img/tk_icon.png) no-repeat 100%/100%;
}
.hero_sxicon.zs, .hero_sxicon.fighter, .hero_sxicon.Fighter .hero_sxicon.Warrior, .hero_sxicon.warrior {
  background: url(../img/zs_icon.png) no-repeat 100%/100%;
}
.hero_sxicon.fs, .hero_sxicon.Mage, .hero_sxicon.mage {
  background: url(../img/fs_icon.png) no-repeat 100%/100%;
}

.hero_zy {
  white-space: nowrap;
  vertical-align: middle;
  font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  color: #ffffff;
  position: absolute;
  left: 0;
  bottom: calc(24 / var(--screen-width) * var(--screen-maxwidth));
  width: 100%;
  text-align: center;
  line-height: calc(39 / var(--screen-width) * var(--screen-maxwidth));
  text-indent: calc(4 / var(--screen-width) * var(--screen-maxwidth));
  opacity: 0;
}
.hero_zy2 {
  top: calc(40 / var(--screen-width) * var(--screen-maxwidth));
}
.hero_zy .hero_sxicon:nth-child(1) {
  margin-left: 0;
  margin-right: calc(4 / var(--screen-width) * var(--screen-maxwidth));
}

.hok_part6 {
  width: 100%;
  height: calc(884 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
  padding-top: calc(1 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 30;
  background: #000;
}
.hok_part6.animate .hok_news_tit6 {
  -webkit-animation: wzs 1s 1 both;
  animation: wzs 1s 1 both;
}
.hok_part6.animate .hok_p6 {
  -webkit-animation: wzs 1s 0.3s 1 both;
  animation: wzs 1s 0.3s 1 both;
}
.hok_part6.animate .hok_p6_des {
  -webkit-animation: wzs 1s 0.5s 1 both;
  animation: wzs 1s 0.5s 1 both;
}
.hok_part6.animate .prg_img {
  /*animation: dz 0.5s 0.8s 1 both;*/
}
.hok_part6.animate .hok_news_tit {
  -webkit-animation: wzs 1s 1 both;
  animation: wzs 1s 1 both;
}

.hok_mf_icon {
  z-index: 70;
}

.hok_pt4_in {
  height: 100%;
  position: relative;
  z-index: 20;
}

.lang_ar .hok_p6_newline {
  display: none;
}

.lang_br .hok_p6_newline {
  display: none;
}

.lang_es .hok_p6_newline {
  display: none;
}

.lang_tr .hok_p6_newline {
  display: none;
}

.lang_ru .hok_p6_newline {
  display: none;
}

.hok_pt4_cont {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.hok_pt4_cont.cur {
  opacity: 1;
}
.hok_pt4_cont.cur .hok_p3 {
  -webkit-animation: pt4trans 0.5s 1 both;
  animation: pt4trans 0.5s 1 both;
}
.hok_pt4_cont.cur .hok_news_tit3 {
  -webkit-animation: pt4trans 0.5s 0.3s 1 both;
  animation: pt4trans 0.5s 0.3s 1 both;
}
.hok_pt4_cont.cur .hok_video {
  -webkit-animation: pt4trans 0.5s 0.7s 1 both;
  animation: pt4trans 0.5s 0.7s 1 both;
}

@-webkit-keyframes pt4trans {
  0% {
    opacity: 0;
    -webkit-transform: translate(calc(50 / var(--screen-width) * var(--screen-maxwidth)), 0);
    transform: translate(calc(50 / var(--screen-width) * var(--screen-maxwidth)), 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes pt4trans {
  0% {
    opacity: 0;
    -webkit-transform: translate(calc(50 / var(--screen-width) * var(--screen-maxwidth)), 0);
    transform: translate(calc(50 / var(--screen-width) * var(--screen-maxwidth)), 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
.p6_change {
  width: 100%;
  height: 100%;
  position: relative;
  /*overflow: hidden;*/
  /*max-width: 1920px;*/
  margin: 0 auto;
}
.p6_change ul {
  width: 10000%;
}
.p6_change ul li {
  float: left;
  width: 100vw !important;
  height: calc(884 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: calc(350 / var(--screen-width) * var(--screen-maxwidth));
  background: #000;
  z-index: 0;
  /*&:after{
  	content:'';
  	width: calc(var(--screen-maxwidth)) !important;
  	height: 100%;
  	position: absolute;
  	left: calc(max(0px,(100vw - 1920px)/2 + 30px));
  	top: 0;
  	background: url(../img/stotry_mask.png) no-repeat 100%/100%;
  }*/
  opacity: 0 !important;
}
.p6_change ul li.swiper-slide-active {
  /*.hok_news_tit6{
  	animation: wzs2 0.5s 0.5s 1 both;
  }*/
  opacity: 1 !important;
  z-index: 50;
}
.p6_change ul li.swiper-slide-active .hok_p6 {
  -webkit-animation: wzs2 0.5s 0.8s 1 both;
  animation: wzs2 0.5s 0.8s 1 both;
}
.p6_change ul li.swiper-slide-active .hok_p6_des {
  -webkit-animation: wzs2 0.5s 1.1s 1 both;
  animation: wzs2 0.5s 1.1s 1 both;
}
.p6_change ul li img {
  display: block;
  width: 100vw;
  height: calc(884 / var(--screen-width) * var(--screen-maxwidth));
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  right: 0;
  top: 0;
}
.p6_change ul li img.tmask {
  z-index: 50;
}
.p6_change ul li img.m_cgimg {
  display: none;
}

@-webkit-keyframes wzs2 {
  0% {
    opacity: 0;
    -webkit-transform: translate(calc(50 / var(--screen-width) * var(--screen-maxwidth)), 0);
    transform: translate(calc(50 / var(--screen-width) * var(--screen-maxwidth)), 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes wzs2 {
  0% {
    opacity: 0;
    -webkit-transform: translate(calc(50 / var(--screen-width) * var(--screen-maxwidth)), 0);
    transform: translate(calc(50 / var(--screen-width) * var(--screen-maxwidth)), 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
.hok_news_tit6 {
  width: calc(440 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(74 / var(--screen-width) * var(--screen-maxwidth));
  left: calc(182 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(128 / var(--screen-width) * var(--screen-maxwidth));
  font-size: calc(40 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 30;
  text-align: left;
  line-height: unset;
}
.lang_ja .hok_news_tit6 {
  white-space: nowrap;
}

.hok_news_tit6:after {
  width: calc(230 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/tit_line2.png) no-repeat 100%/100%;
}
.hok_news_tit6 span {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#cb973a), to(#f2be61));
  background-image: linear-gradient(to bottom, #cb973a, #f2be61);
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hok_p6 {
  opacity: 0;
  width: calc(822 / var(--screen-width) * var(--screen-maxwidth));
  text-align: left;
  left: calc(180 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(250 / var(--screen-width) * var(--screen-maxwidth));
  color: #ffffff;
  font-size: calc(60 / var(--screen-width) * var(--screen-maxwidth));
  line-height: calc(70 / var(--screen-width) * var(--screen-maxwidth));
  font-weight: normal;
  z-index: 30;
}

.lang_my .hok_p6 {
  font-size: calc(54 / var(--screen-width) * var(--screen-maxwidth));
}

.hok_p6_des {
  width: calc(520 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: calc(180 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(415 / var(--screen-width) * var(--screen-maxwidth));
  font-size: calc(20 / var(--screen-width) * var(--screen-maxwidth));
  color: #d7d7d7;
  line-height: calc(28 / var(--screen-width) * var(--screen-maxwidth));
  letter-spacing: calc(-0.5 / var(--screen-width) * var(--screen-maxwidth));
  opacity: 0;
  z-index: 30;
}

.lang_my .hok_p6, .lang_my .hok_p6_des {
  line-height: 1.6;
}
.lang_my .hok_p6_des {
  top: calc(435 / var(--screen-width) * var(--screen-maxwidth));
}

.time_line {
  width: calc(1569 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(14 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/time_line.png) no-repeat 100%/100%;
  position: absolute;
  left: 50%;
  bottom: calc(86 / var(--screen-width) * var(--screen-maxwidth));
  margin-left: calc(-784.5 / var(--screen-width) * var(--screen-maxwidth));
  text-align: center;
  -webkit-transform: translateZ(1px);
  transform: translateZ(1px);
  z-index: 100;
}

.prg_img {
  display: none;
}

.prg_icn {
  display: inline-block;
  vertical-align: top;
  width: calc(1 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(1 / var(--screen-width) * var(--screen-maxwidth));
  margin: calc(7 / var(--screen-width) * var(--screen-maxwidth)) calc(143 / var(--screen-width) * var(--screen-maxwidth)) 0;
  position: relative;
  cursor: pointer;
  transform: translateZ(1px);
  -webkit-transform: translateZ(1px);
}
.prg_icn:hover .prgicon {
  width: calc(79 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(79 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/point_hover.png) no-repeat 100%/100%;
}
.prg_icn:hover .prg_img {
  display: block;
  width: calc(120 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(75 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: 50%;
  top: calc(-122 / var(--screen-width) * var(--screen-maxwidth));
  margin-left: calc(-60 / var(--screen-width) * var(--screen-maxwidth));
  -webkit-mask-image: url(../img/prg_mask2.png);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: auto 100%;
}
.prg_icn:hover .prg_img img {
  display: block;
  width: 100%;
}
.prg_icn:hover .prg_img:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 30;
  background: url(../img/prg_maskline2.png) no-repeat;
  background-size: 100% auto;
}
.prg_icn.swiper-pagination-bullet-active .prgicon {
  width: calc(68 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(68 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/cur_point.png) no-repeat 100%/100%;
}
.prg_icn.swiper-pagination-bullet-active .prg_img {
  display: block;
  width: calc(120 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(75 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: 50%;
  top: calc(-122 / var(--screen-width) * var(--screen-maxwidth));
  margin-left: calc(-60 / var(--screen-width) * var(--screen-maxwidth));
  -webkit-mask-image: url(../img/prg_mask2.png);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: auto 100%;
}
.prg_icn.swiper-pagination-bullet-active .prg_img img {
  display: block;
  width: 100%;
}
.prg_icn.swiper-pagination-bullet-active .prg_img:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 30;
  background: url(../img/prg_maskline2.png) no-repeat;
  background-size: 100% auto;
}
.prg_icn.showslimg .prg_img {
  display: none !important;
}
.prg_icn.showslimg:hover .prg_img {
  display: block !important;
}

.prgicon {
  display: block;
  width: calc(26 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(26 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/point.png) no-repeat 100%/100%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-filter: drop-shadow(#000 0 0 10px);
  filter: drop-shadow(#000 0 0 10px);
}

.hok_alpha_test {
  width: 100%;
  color: #fff;
  font-size: 3.2vh;
  position: absolute;
  top: 62.4vh;
  z-index: 30;
  text-align: center;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff0c7), color-stop(50%, #ffffff), to(#fff));
  background-image: linear-gradient(to bottom, #fff0c7 0%, #ffffff 50%, #fff 100%);
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hok_alpha_test.isen {
  display: none !important;
}
.hok_alpha_test.otherlan {
  display: block !important;
  top: 60.4vh;
}

.lang_en .hok_alpha_test {
  display: block !important;
}
.lang_en .hok_alpha_test.otherlan {
  display: none !important;
}

.hok_other_para {
  width: 120%;
  z-index: 30;
  text-align: center;
  position: absolute;
  left: -10%;
  top: 68vh;
  font-size: 2.4vh;
  color: #f2d392;
  text-transform: uppercase;
}
.hok_other_para a {
  color: #f2d391;
  text-decoration: underline;
  padding: 0 2vh;
}
.hok_other_para a:last-child {
  padding-right: 0;
}
.hok_other_para a.fstr {
  padding-left: 0;
}
.hok_other_para a:hover {
  color: #ffffff;
}
.hok_other_para span {
  display: block;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.hok_other_para em {
  font-style: normal;
}
.hok_other_para .ot_line {
  display: block;
  width: 4vh;
  border-top: 1px solid #fff;
  margin: -0.4vh 2vh 0;
}

.p6_change ul li.out3:after {
  content: "";
  display: block;
  width: calc(264 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(51 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/hanz_en.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  bottom: calc(208 / var(--screen-width) * var(--screen-maxwidth));
  margin-left: calc(300 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 50;
}

.lang_tr .p6_change ul li.out3:after {
  background: url(../img/hanz_tr.png) no-repeat;
  background-size: 100% 100%;
}

.lang_es .p6_change ul li.out3:after,
.lang_ru .p6_change ul li.out3:after {
  width: calc(328 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/hanz_es.png) no-repeat;
  background-size: 100% 100%;
}

.lang_br .p6_change ul li.out3:after {
  width: calc(318 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/hanz_pt.png) no-repeat;
  background-size: 100% 100%;
}

@-webkit-keyframes langxl {
  0% {
    opacity: 0;
    height: 0;
  }
  30% {
    opacity: 1;
    height: calc(8 / var(--screen-width) * var(--screen-maxwidth));
  }
  100% {
    opacity: 1;
    height: auto;
  }
}
@keyframes langxl {
  0% {
    opacity: 0;
    height: 0;
  }
  30% {
    opacity: 1;
    height: calc(8 / var(--screen-width) * var(--screen-maxwidth));
  }
  100% {
    opacity: 1;
    height: auto;
  }
}
.dav_box {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.7);
}

.dav_in {
  width: 70vw;
  height: 39.375vw;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -35vh 0 0 -35vw;
  background: #000;
}

.dav_in video {
  display: block;
  width: 100%;
  height: 100%;
}

.dav_in #player {
  width: 100%;
  height: 100%;
}

.dav_in .player {
  width: 100%;
  height: 100%;
}

.dav_close {
  display: block;
  width: calc(70 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(70 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  right: calc(-80 / var(--screen-width) * var(--screen-maxwidth));
  top: 0;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  background: url(../img/close.png) no-repeat 100%/100%;
  text-indent: -9999px;
}

.dav_close:hover {
  -webkit-animation: ani-close 0.5s linear 1 both;
  animation: ani-close 0.5s linear 1 both;
}

@-webkit-keyframes ani-close {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes ani-close {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.hok_bot_link {
  display: block;
  width: 100%;
  height: calc(118 / var(--screen-width) * var(--screen-maxwidth));
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 30;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: auto;
  background: none;
  bottom: unset;
  top: 82.2vh;
}
.hok_bot_link a {
  margin: 0 calc(15 / var(--screen-width) * var(--screen-maxwidth));
  width: calc(45 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(45 / var(--screen-width) * var(--screen-maxwidth));
  opacity: 0.8;
}
.hok_bot_link a {
  width: 4.5vh;
  height: 4.5vh;
  margin: 0 calc(15 / var(--screen-width) * var(--screen-maxwidth));
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
}
.hok_bot_link a.facebook_icon {
  background: url(../img/facebook_g.png) no-repeat;
  background-size: 100% 100%;
}
.hok_bot_link a.twitter_icon {
  background: url(../img/twitter_g.png) no-repeat;
  background-size: 100% 100%;
}
.hok_bot_link a.youtube_icon {
  background: url(../img/youtube_g.png) no-repeat;
  background-size: 100% 100%;
}
.hok_bot_link a.discord_icon {
  background: url(../img/discord_g.png) no-repeat;
  background-size: 100% 100%;
}
.hok_bot_link a.instagram_icon {
  background: url(../img/instagram_g.png) no-repeat;
  background-size: 100% 100%;
}
.hok_bot_link a.tiktok_icon {
  background: url(../img/tiktok_g.png) no-repeat;
  background-size: 100% 100%;
}
.hok_bot_link a.apple_icon {
  background: url(../img/apple_g.png) no-repeat;
  background-size: 100% 100%;
}
.hok_bot_link a.email_icon {
  background: url(../img/email_g.png) no-repeat;
  background-size: 100% 100%;
}
.hok_bot_link a.google_icon {
  background: url(../img/google_g.png) no-repeat;
  background-size: 100% 100%;
}
.hok_bot_link a.kwai_icon {
  background: url(../img/kwai_g.png) no-repeat;
  background-size: 100% 100%;
}
.hok_bot_link a.lipass_icon {
  background: url(../img/lipass_g.png) no-repeat;
  background-size: 100% 100%;
}
.hok_bot_link a.twitch_icon {
  background: url(../img/twitch_g.png) no-repeat;
  background-size: 100% 100%;
}
.hok_bot_link a.vk_icon {
  background: url(../img/vk_g.png) no-repeat;
  background-size: 100% 100%;
}
.hok_bot_link a.wechat_icon {
  background: url(../img/wechat_g.png) no-repeat;
  background-size: 100% 100%;
}
.hok_bot_link a.telegram_icon {
  background: url(../img/telegram_g.png) no-repeat;
  background-size: 100% 100%;
}
.hok_bot_link a.threads_icon {
  background: url(../img/threads_g.png) no-repeat;
  background-size: 100% 100%;
}
.hok_bot_link a.whatsapp_icon {
  background: url(../img/whatsapp_g.png) no-repeat;
  background-size: 100% 100%;
}

.lang_my .hok_news_tit {
  font-size: calc(50 / var(--screen-width) * var(--screen-maxwidth));
  line-height: 1.8 !important;
}
.lang_my .hok_news_tit6 {
  font-size: calc(28 / var(--screen-width) * var(--screen-maxwidth));
}
.lang_my .hok_pts2_des {
  line-height: 1.8;
}
.lang_my .hok_pts2_box .hok_pts2_des {
  font-size: calc(15 / var(--screen-width) * var(--screen-maxwidth));
  line-height: 1.8;
}
.lang_my .hok_pts2_box .hok_pts2_list li:nth-child(2) .hok_pts2_des {
  font-size: calc(15 / var(--screen-width) * var(--screen-maxwidth));
}

.lang_es .hok_pts2_box .hok_pts2_des, .lang_fr .hok_pts2_box .hok_pts2_des, .lang_de .hok_pts2_box .hok_pts2_des {
  font-size: calc(18 / var(--screen-width) * var(--screen-maxwidth));
}
.lang_es .hok_pts2_box .hok_pts2_list li:nth-child(2) .hok_pts2_des, .lang_fr .hok_pts2_box .hok_pts2_list li:nth-child(2) .hok_pts2_des, .lang_de .hok_pts2_box .hok_pts2_list li:nth-child(2) .hok_pts2_des {
  font-size: calc(20 / var(--screen-width) * var(--screen-maxwidth));
}

@media screen and (min-width: 600px) {
  .hok_bot_link.isen {
    top: 78.2vh;
  }
  .lang_en .hok_bot_link.isen {
    top: 78.2vh;
  }
}
@media screen and (min-width: 900px) {
  .hok_bot_link.isen a:hover {
    -webkit-filter: brightness(1.2);
    filter: brightness(1.2);
  }
  .lang_ru .hok_alpha_test br {
    display: none;
  }
}
.mbl {
  display: none !important;
}

.loading {
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  overflow: hidden;
}

.onetrust-pc-dark-filter,
#onetrust-pc-sdk,
body #onetrust-banner-sdk.otFlat {
  z-index: 900 !important;
}

#onetrust-pc-sdk {
  z-index: 1000 !important;
}

.loading-player {
  width: calc(1920 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(1080 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.loading_in {
  width: calc(400 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(400 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.loading_in .loading_logo {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
  width: calc(169 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(154 / var(--screen-width) * var(--screen-maxwidth));
  margin: calc(84 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
}
.fallback .loading_in .loading_logo {
  background-image: url("../img/loading_logo.png");
}
.webp .loading_in .loading_logo {
  background-image: url("../img/loading_logo.webp");
}
.avif .loading_in .loading_logo {
  background-image: url("../img/loading_logo.avif");
}
.loading_in .loading_txt {
  width: 100%;
  width: calc(242 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(40 / var(--screen-width) * var(--screen-maxwidth));
  line-height: calc(40 / var(--screen-width) * var(--screen-maxwidth));
  font-size: calc(28 / var(--screen-width) * var(--screen-maxwidth));
  font-weight: bold;
  text-align: center;
  margin: calc(64 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
  color: #bf8f3a;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.loading_in .loading_txt i {
  display: block;
  width: calc(66 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(19 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/loading_arrow.png) no-repeat;
  background-size: calc(243 / var(--screen-width) * var(--screen-maxwidth)) calc(19 / var(--screen-width) * var(--screen-maxwidth));
  background-position: 0 0;
  margin-top: calc(10 / var(--screen-width) * var(--screen-maxwidth));
  -webkit-animation: ani-loading-l 1s ease infinite alternate;
  animation: ani-loading-l 1s ease infinite alternate;
}
.loading_in .loading_txt i:last-child {
  background-position: calc(-177 / var(--screen-width) * var(--screen-maxwidth));
  -webkit-animation: ani-loading-r 1s ease infinite alternate;
  animation: ani-loading-r 1s ease infinite alternate;
}
@-webkit-keyframes ani-loading-l {
  100% {
    -webkit-transform: translate(calc(16 / var(--screen-width) * var(--screen-maxwidth)), 0);
    transform: translate(calc(16 / var(--screen-width) * var(--screen-maxwidth)), 0);
  }
}
@keyframes ani-loading-l {
  100% {
    -webkit-transform: translate(calc(16 / var(--screen-width) * var(--screen-maxwidth)), 0);
    transform: translate(calc(16 / var(--screen-width) * var(--screen-maxwidth)), 0);
  }
}
@-webkit-keyframes ani-loading-r {
  100% {
    -webkit-transform: translate(calc(-16 / var(--screen-width) * var(--screen-maxwidth)), 0);
    transform: translate(calc(-16 / var(--screen-width) * var(--screen-maxwidth)), 0);
  }
}
@keyframes ani-loading-r {
  100% {
    -webkit-transform: translate(calc(-16 / var(--screen-width) * var(--screen-maxwidth)), 0);
    transform: translate(calc(-16 / var(--screen-width) * var(--screen-maxwidth)), 0);
  }
}

@-webkit-keyframes loading {
  0% {
    width: calc(1920 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(1080 / var(--screen-width) * var(--screen-maxwidth));
  }
  2.78% {
    background-position: calc(-1920 / var(--screen-width) * var(--screen-maxwidth)) 0;
  }
  5.56% {
    background-position: 0 calc(-1080 / var(--screen-width) * var(--screen-maxwidth));
  }
  8.33% {
    background-position: calc(-1920 / var(--screen-width) * var(--screen-maxwidth)) calc(-1080 / var(--screen-width) * var(--screen-maxwidth));
  }
  11.11% {
    background-position: 0 calc(-2160 / var(--screen-width) * var(--screen-maxwidth));
  }
  13.89% {
    background-position: calc(-1920 / var(--screen-width) * var(--screen-maxwidth)) calc(-2160 / var(--screen-width) * var(--screen-maxwidth));
  }
  16.67% {
    background-position: calc(-3840 / var(--screen-width) * var(--screen-maxwidth)) 0;
  }
  19.44% {
    background-position: calc(-3840 / var(--screen-width) * var(--screen-maxwidth)) calc(-1080 / var(--screen-width) * var(--screen-maxwidth));
  }
  22.22% {
    background-position: calc(-3840 / var(--screen-width) * var(--screen-maxwidth)) calc(-2160 / var(--screen-width) * var(--screen-maxwidth));
  }
  25.00% {
    background-position: 0 calc(-3240 / var(--screen-width) * var(--screen-maxwidth));
  }
  27.78% {
    background-position: calc(-1920 / var(--screen-width) * var(--screen-maxwidth)) calc(-3240 / var(--screen-width) * var(--screen-maxwidth));
  }
  30.56% {
    background-position: calc(-3840 / var(--screen-width) * var(--screen-maxwidth)) calc(-3240 / var(--screen-width) * var(--screen-maxwidth));
  }
  33.33% {
    background-position: 0 calc(-4320 / var(--screen-width) * var(--screen-maxwidth));
  }
  36.11% {
    background-position: calc(-1920 / var(--screen-width) * var(--screen-maxwidth)) calc(-4320 / var(--screen-width) * var(--screen-maxwidth));
  }
  38.89% {
    background-position: calc(-3840 / var(--screen-width) * var(--screen-maxwidth)) calc(-4320 / var(--screen-width) * var(--screen-maxwidth));
  }
  41.67% {
    background-position: calc(-5760 / var(--screen-width) * var(--screen-maxwidth)) 0;
  }
  44.44% {
    background-position: calc(-5760 / var(--screen-width) * var(--screen-maxwidth)) calc(-1080 / var(--screen-width) * var(--screen-maxwidth));
  }
  47.22% {
    background-position: calc(-5760 / var(--screen-width) * var(--screen-maxwidth)) calc(-2160 / var(--screen-width) * var(--screen-maxwidth));
  }
  50.00% {
    background-position: calc(-5760 / var(--screen-width) * var(--screen-maxwidth)) calc(-3240 / var(--screen-width) * var(--screen-maxwidth));
  }
  52.78% {
    background-position: calc(-5760 / var(--screen-width) * var(--screen-maxwidth)) calc(-4320 / var(--screen-width) * var(--screen-maxwidth));
  }
  55.56% {
    background-position: 0 calc(-5400 / var(--screen-width) * var(--screen-maxwidth));
  }
  58.33% {
    background-position: calc(-1920 / var(--screen-width) * var(--screen-maxwidth)) calc(-5400 / var(--screen-width) * var(--screen-maxwidth));
  }
  61.11% {
    background-position: calc(-3840 / var(--screen-width) * var(--screen-maxwidth)) calc(-5400 / var(--screen-width) * var(--screen-maxwidth));
  }
  63.89% {
    background-position: calc(-5760 / var(--screen-width) * var(--screen-maxwidth)) calc(-5400 / var(--screen-width) * var(--screen-maxwidth));
  }
  66.67% {
    background-position: 0 calc(-6480 / var(--screen-width) * var(--screen-maxwidth));
  }
  69.44% {
    background-position: calc(-1920 / var(--screen-width) * var(--screen-maxwidth)) calc(-6480 / var(--screen-width) * var(--screen-maxwidth));
  }
  72.22% {
    background-position: calc(-3840 / var(--screen-width) * var(--screen-maxwidth)) calc(-6480 / var(--screen-width) * var(--screen-maxwidth));
  }
  75.00% {
    background-position: calc(-5760 / var(--screen-width) * var(--screen-maxwidth)) calc(-6480 / var(--screen-width) * var(--screen-maxwidth));
  }
  77.78% {
    background-position: calc(-7680 / var(--screen-width) * var(--screen-maxwidth)) 0;
  }
  80.56% {
    background-position: calc(-7680 / var(--screen-width) * var(--screen-maxwidth)) calc(-1080 / var(--screen-width) * var(--screen-maxwidth));
  }
  83.33% {
    background-position: calc(-7680 / var(--screen-width) * var(--screen-maxwidth)) calc(-2160 / var(--screen-width) * var(--screen-maxwidth));
  }
  86.11% {
    background-position: calc(-7680 / var(--screen-width) * var(--screen-maxwidth)) calc(-3240 / var(--screen-width) * var(--screen-maxwidth));
  }
  88.89% {
    background-position: calc(-7680 / var(--screen-width) * var(--screen-maxwidth)) calc(-4320 / var(--screen-width) * var(--screen-maxwidth));
  }
  91.67% {
    background-position: calc(-7680 / var(--screen-width) * var(--screen-maxwidth)) calc(-5400 / var(--screen-width) * var(--screen-maxwidth));
  }
  94.44% {
    background-position: calc(-7680 / var(--screen-width) * var(--screen-maxwidth)) calc(-6480 / var(--screen-width) * var(--screen-maxwidth));
  }
  97.22%, 100% {
    background-position: 0 calc(-7560 / var(--screen-width) * var(--screen-maxwidth));
  }
}
@keyframes loading {
  0% {
    width: calc(1920 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(1080 / var(--screen-width) * var(--screen-maxwidth));
  }
  2.78% {
    background-position: calc(-1920 / var(--screen-width) * var(--screen-maxwidth)) 0;
  }
  5.56% {
    background-position: 0 calc(-1080 / var(--screen-width) * var(--screen-maxwidth));
  }
  8.33% {
    background-position: calc(-1920 / var(--screen-width) * var(--screen-maxwidth)) calc(-1080 / var(--screen-width) * var(--screen-maxwidth));
  }
  11.11% {
    background-position: 0 calc(-2160 / var(--screen-width) * var(--screen-maxwidth));
  }
  13.89% {
    background-position: calc(-1920 / var(--screen-width) * var(--screen-maxwidth)) calc(-2160 / var(--screen-width) * var(--screen-maxwidth));
  }
  16.67% {
    background-position: calc(-3840 / var(--screen-width) * var(--screen-maxwidth)) 0;
  }
  19.44% {
    background-position: calc(-3840 / var(--screen-width) * var(--screen-maxwidth)) calc(-1080 / var(--screen-width) * var(--screen-maxwidth));
  }
  22.22% {
    background-position: calc(-3840 / var(--screen-width) * var(--screen-maxwidth)) calc(-2160 / var(--screen-width) * var(--screen-maxwidth));
  }
  25.00% {
    background-position: 0 calc(-3240 / var(--screen-width) * var(--screen-maxwidth));
  }
  27.78% {
    background-position: calc(-1920 / var(--screen-width) * var(--screen-maxwidth)) calc(-3240 / var(--screen-width) * var(--screen-maxwidth));
  }
  30.56% {
    background-position: calc(-3840 / var(--screen-width) * var(--screen-maxwidth)) calc(-3240 / var(--screen-width) * var(--screen-maxwidth));
  }
  33.33% {
    background-position: 0 calc(-4320 / var(--screen-width) * var(--screen-maxwidth));
  }
  36.11% {
    background-position: calc(-1920 / var(--screen-width) * var(--screen-maxwidth)) calc(-4320 / var(--screen-width) * var(--screen-maxwidth));
  }
  38.89% {
    background-position: calc(-3840 / var(--screen-width) * var(--screen-maxwidth)) calc(-4320 / var(--screen-width) * var(--screen-maxwidth));
  }
  41.67% {
    background-position: calc(-5760 / var(--screen-width) * var(--screen-maxwidth)) 0;
  }
  44.44% {
    background-position: calc(-5760 / var(--screen-width) * var(--screen-maxwidth)) calc(-1080 / var(--screen-width) * var(--screen-maxwidth));
  }
  47.22% {
    background-position: calc(-5760 / var(--screen-width) * var(--screen-maxwidth)) calc(-2160 / var(--screen-width) * var(--screen-maxwidth));
  }
  50.00% {
    background-position: calc(-5760 / var(--screen-width) * var(--screen-maxwidth)) calc(-3240 / var(--screen-width) * var(--screen-maxwidth));
  }
  52.78% {
    background-position: calc(-5760 / var(--screen-width) * var(--screen-maxwidth)) calc(-4320 / var(--screen-width) * var(--screen-maxwidth));
  }
  55.56% {
    background-position: 0 calc(-5400 / var(--screen-width) * var(--screen-maxwidth));
  }
  58.33% {
    background-position: calc(-1920 / var(--screen-width) * var(--screen-maxwidth)) calc(-5400 / var(--screen-width) * var(--screen-maxwidth));
  }
  61.11% {
    background-position: calc(-3840 / var(--screen-width) * var(--screen-maxwidth)) calc(-5400 / var(--screen-width) * var(--screen-maxwidth));
  }
  63.89% {
    background-position: calc(-5760 / var(--screen-width) * var(--screen-maxwidth)) calc(-5400 / var(--screen-width) * var(--screen-maxwidth));
  }
  66.67% {
    background-position: 0 calc(-6480 / var(--screen-width) * var(--screen-maxwidth));
  }
  69.44% {
    background-position: calc(-1920 / var(--screen-width) * var(--screen-maxwidth)) calc(-6480 / var(--screen-width) * var(--screen-maxwidth));
  }
  72.22% {
    background-position: calc(-3840 / var(--screen-width) * var(--screen-maxwidth)) calc(-6480 / var(--screen-width) * var(--screen-maxwidth));
  }
  75.00% {
    background-position: calc(-5760 / var(--screen-width) * var(--screen-maxwidth)) calc(-6480 / var(--screen-width) * var(--screen-maxwidth));
  }
  77.78% {
    background-position: calc(-7680 / var(--screen-width) * var(--screen-maxwidth)) 0;
  }
  80.56% {
    background-position: calc(-7680 / var(--screen-width) * var(--screen-maxwidth)) calc(-1080 / var(--screen-width) * var(--screen-maxwidth));
  }
  83.33% {
    background-position: calc(-7680 / var(--screen-width) * var(--screen-maxwidth)) calc(-2160 / var(--screen-width) * var(--screen-maxwidth));
  }
  86.11% {
    background-position: calc(-7680 / var(--screen-width) * var(--screen-maxwidth)) calc(-3240 / var(--screen-width) * var(--screen-maxwidth));
  }
  88.89% {
    background-position: calc(-7680 / var(--screen-width) * var(--screen-maxwidth)) calc(-4320 / var(--screen-width) * var(--screen-maxwidth));
  }
  91.67% {
    background-position: calc(-7680 / var(--screen-width) * var(--screen-maxwidth)) calc(-5400 / var(--screen-width) * var(--screen-maxwidth));
  }
  94.44% {
    background-position: calc(-7680 / var(--screen-width) * var(--screen-maxwidth)) calc(-6480 / var(--screen-width) * var(--screen-maxwidth));
  }
  97.22%, 100% {
    background-position: 0 calc(-7560 / var(--screen-width) * var(--screen-maxwidth));
  }
}
.hok_m_map,
.m_view_box,
.hok_news_tit7,
.m_cgimg {
  display: none;
}

.m_kv_changes {
  display: none;
}

.stimg {
  display: none !important;
}

.hero_change_box2 {
  display: none;
}

@media screen and (max-height: 820px) and (min-width: 1000px) {
  .hok_part4,
  .hok_part5 {
    /*zoom:0.8;*/
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    width: 125%;
  }
  .hok_part1 {
    /*height:  calc(1100 / var(--screen-width) * var(--screen-maxwidth) + 95vh);*/
  }
  .hok_news {
    /*zoom:0.9;*/
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  .hok_news .hok_new_det {
    margin-top: calc(30 / var(--screen-width) * var(--screen-maxwidth));
  }
  .hok_part5 {
    height: calc(1219 / var(--screen-width) * var(--screen-maxwidth));
  }
  .hok_part3 {
    max-height: unset;
  }
  .hero_change_box {
    /*zoom:0.9;*/
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  .hok_gb_tit,
  .hok_p1sdf {
    /*zoom:0.9;*/
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    left: calc(0.1302083333 * var(--screen-maxwidth));
  }
  .hok_iconlist,
  .hok_kvchangelist,
  .hok_kvpara,
  .hok_tips {
    margin-top: calc(-70 / var(--screen-width) * var(--screen-maxwidth));
  }
  @supports (zoom: 1) {
    .hok_part3,
    .hok_part4,
    .hok_part5 {
      -webkit-transform: scale(1);
      transform: scale(1);
      zoom: 0.8;
      width: 100%;
    }
    .hok_part2 {
      margin-bottom: 0;
    }
    .hok_news {
      -webkit-transform: scale(1);
      transform: scale(1);
      zoom: 0.9;
    }
    .hero_change_box {
      -webkit-transform: scale(1);
      transform: scale(1);
      zoom: 0.9;
    }
    .hok_gb_tit,
    .hok_p1sdf {
      -webkit-transform: scale(1);
      transform: scale(1);
      zoom: 0.9;
    }
  }
}
.lang_es .hok_part6 li.out2 .hok_p6m,
.lang_ru .hok_part6 li.out2 .hok_p6 {
  width: calc(620 / var(--screen-width) * var(--screen-maxwidth));
}

.lang_es .hok_part6 li.out3 .hok_p6m,
.lang_ru .hok_part6 li.out3 .hok_p6 {
  width: calc(688 / var(--screen-width) * var(--screen-maxwidth));
}

.lang_ru .hok_part6 li.out4 .hok_p6 {
  width: calc(1002 / var(--screen-width) * var(--screen-maxwidth));
}

.lang_es .hok_gb_tit,
.lang_ru .hok_gb_tit {
  width: calc(1150 / var(--screen-width) * var(--screen-maxwidth));
}

.lang_br .hok_part6 li .hok_p6 {
  width: calc(636 / var(--screen-width) * var(--screen-maxwidth));
}

@media screen and (min-width: 900px) {
  .lang_tr .p6_change li.out1 .hok_p6_des,
  .lang_tr .p6_change li.out2 .hok_p6_des,
  .lang_ar .p6_change li.out1 .hok_p6_des,
  .lang_ar .p6_change li.out2 .hok_p6_des,
  .lang_ar .p6_change li.out3 .hok_p6_des {
    top: calc(356 / var(--screen-width) * var(--screen-maxwidth));
  }
}
.esport_btn {
  float: left;
  font-size: 10.5px;
  height: 66px;
  padding-top: 27px;
  color: #b7b7b7;
  margin-left: calc(37.5 / var(--screen-width) * var(--screen-maxwidth));
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.lang_en .noten {
  display: none !important;
}
.lang_en .hok_bot_link.isen {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}
.lang_en .hok_bot_link.noten {
  display: none !important;
}

@media screen and (max-width: 1200px) {
  a:active {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
  }
  .hok_nav .esport_btn {
    display: none !important;
  }
}
@media screen and (max-height: 601px) and (min-width: 601px) {
  .hov_m_morebox.show {
    height: 100vh;
  }
  .hov_m_morebox .hd_nv_list li {
    height: calc(62 / var(--screen-width2) * var(--screen-maxwidth));
    line-height: calc(62 / var(--screen-width2) * var(--screen-maxwidth));
    font-size: calc(30 / var(--screen-width2) * var(--screen-maxwidth));
  }
  .hok_head {
    height: 110vh;
  }
  .hd_btnbox,
  .hok_head .hok_stbox {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  .hok_head .hok_stbox {
    top: 90.3vh;
    z-index: 40;
  }
  .lang_br .hok_other_para.brshow {
    top: 76vh;
  }
}
@-webkit-keyframes mdline {
  0% {
    width: calc(1 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(1 / var(--screen-width) * var(--screen-maxwidth));
  }
  2.86% {
    background-position: calc(-1706 / var(--screen-width) * var(--screen-maxwidth)) calc(-261 / var(--screen-width) * var(--screen-maxwidth));
  }
  5.71% {
    background-position: calc(-1707 / var(--screen-width) * var(--screen-maxwidth)) calc(-261 / var(--screen-width) * var(--screen-maxwidth));
  }
  8.57% {
    width: calc(62 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(67 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1378 / var(--screen-width) * var(--screen-maxwidth)) calc(-924 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(151 / var(--screen-width) * var(--screen-maxwidth)), calc(285 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(151 / var(--screen-width) * var(--screen-maxwidth)), calc(285 / var(--screen-width) * var(--screen-maxwidth)));
  }
  11.43% {
    width: calc(126 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(141 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-760 / var(--screen-width) * var(--screen-maxwidth)) calc(-1200 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(122 / var(--screen-width) * var(--screen-maxwidth)), calc(248 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(122 / var(--screen-width) * var(--screen-maxwidth)), calc(248 / var(--screen-width) * var(--screen-maxwidth)));
  }
  14.29% {
    width: calc(170 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(167 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1480 / var(--screen-width) * var(--screen-maxwidth)) calc(-1302 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(96 / var(--screen-width) * var(--screen-maxwidth)), calc(231 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(96 / var(--screen-width) * var(--screen-maxwidth)), calc(231 / var(--screen-width) * var(--screen-maxwidth)));
  }
  17.14% {
    width: calc(180 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(179 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1480 / var(--screen-width) * var(--screen-maxwidth)) calc(-1123 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(91 / var(--screen-width) * var(--screen-maxwidth)), calc(216 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(91 / var(--screen-width) * var(--screen-maxwidth)), calc(216 / var(--screen-width) * var(--screen-maxwidth)));
  }
  20.00% {
    width: calc(194 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(198 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1480 / var(--screen-width) * var(--screen-maxwidth)) calc(-925 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(85 / var(--screen-width) * var(--screen-maxwidth)), calc(199 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(85 / var(--screen-width) * var(--screen-maxwidth)), calc(199 / var(--screen-width) * var(--screen-maxwidth)));
  }
  22.86% {
    width: calc(198 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(209 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1480 / var(--screen-width) * var(--screen-maxwidth)) calc(-716 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(84 / var(--screen-width) * var(--screen-maxwidth)), calc(187 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(84 / var(--screen-width) * var(--screen-maxwidth)), calc(187 / var(--screen-width) * var(--screen-maxwidth)));
  }
  25.71% {
    width: calc(210 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(223 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1480 / var(--screen-width) * var(--screen-maxwidth)) calc(-493 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(79 / var(--screen-width) * var(--screen-maxwidth)), calc(169 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(79 / var(--screen-width) * var(--screen-maxwidth)), calc(169 / var(--screen-width) * var(--screen-maxwidth)));
  }
  28.57% {
    width: calc(225 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(232 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1480 / var(--screen-width) * var(--screen-maxwidth)) calc(-261 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(73 / var(--screen-width) * var(--screen-maxwidth)), calc(155 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(73 / var(--screen-width) * var(--screen-maxwidth)), calc(155 / var(--screen-width) * var(--screen-maxwidth)));
  }
  31.43% {
    width: calc(245 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(239 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-515 / var(--screen-width) * var(--screen-maxwidth)) calc(-1200 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(61 / var(--screen-width) * var(--screen-maxwidth)), calc(143 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(61 / var(--screen-width) * var(--screen-maxwidth)), calc(143 / var(--screen-width) * var(--screen-maxwidth)));
  }
  34.29% {
    width: calc(251 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(242 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-264 / var(--screen-width) * var(--screen-maxwidth)) calc(-1200 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(57 / var(--screen-width) * var(--screen-maxwidth)), calc(138 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(57 / var(--screen-width) * var(--screen-maxwidth)), calc(138 / var(--screen-width) * var(--screen-maxwidth)));
  }
  37.14% {
    width: calc(262 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(248 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1116 / var(--screen-width) * var(--screen-maxwidth)) calc(-924 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(52 / var(--screen-width) * var(--screen-maxwidth)), calc(128 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(52 / var(--screen-width) * var(--screen-maxwidth)), calc(128 / var(--screen-width) * var(--screen-maxwidth)));
  }
  40.00% {
    width: calc(273 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(255 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-843 / var(--screen-width) * var(--screen-maxwidth)) calc(-924 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(46 / var(--screen-width) * var(--screen-maxwidth)), calc(119 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(46 / var(--screen-width) * var(--screen-maxwidth)), calc(119 / var(--screen-width) * var(--screen-maxwidth)));
  }
  42.86% {
    width: calc(279 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(264 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-564 / var(--screen-width) * var(--screen-maxwidth)) calc(-924 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(107 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(107 / var(--screen-width) * var(--screen-maxwidth)));
  }
  45.71% {
    width: calc(281 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(269 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-283 / var(--screen-width) * var(--screen-maxwidth)) calc(-924 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(101 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(101 / var(--screen-width) * var(--screen-maxwidth)));
  }
  48.57% {
    width: calc(283 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(276 / var(--screen-width) * var(--screen-maxwidth));
    background-position: 0 calc(-924 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(92 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(92 / var(--screen-width) * var(--screen-maxwidth)));
  }
  51.43% {
    width: calc(287 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(282 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1190 / var(--screen-width) * var(--screen-maxwidth)) calc(-577 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(84 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(84 / var(--screen-width) * var(--screen-maxwidth)));
  }
  54.29% {
    width: calc(289 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(287 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1190 / var(--screen-width) * var(--screen-maxwidth)) calc(-290 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(76 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(76 / var(--screen-width) * var(--screen-maxwidth)));
  }
  57.14% {
    width: calc(290 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(290 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1190 / var(--screen-width) * var(--screen-maxwidth)) 0;
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(73 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(73 / var(--screen-width) * var(--screen-maxwidth)));
  }
  60.00% {
    width: calc(292 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(295 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-587 / var(--screen-width) * var(--screen-maxwidth)) calc(-621 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(67 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(67 / var(--screen-width) * var(--screen-maxwidth)));
  }
  62.86% {
    width: calc(294 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(299 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-293 / var(--screen-width) * var(--screen-maxwidth)) calc(-621 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(63 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(63 / var(--screen-width) * var(--screen-maxwidth)));
  }
  65.71% {
    width: calc(295 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(301 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-894 / var(--screen-width) * var(--screen-maxwidth)) calc(-302 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(59 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(59 / var(--screen-width) * var(--screen-maxwidth)));
  }
  68.57% {
    width: calc(296 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(302 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-894 / var(--screen-width) * var(--screen-maxwidth)) 0;
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(56 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(56 / var(--screen-width) * var(--screen-maxwidth)));
  }
  71.43% {
    width: calc(295 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(307 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-594 / var(--screen-width) * var(--screen-maxwidth)) calc(-312 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(52 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(52 / var(--screen-width) * var(--screen-maxwidth)));
  }
  74.29% {
    width: calc(297 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(309 / var(--screen-width) * var(--screen-maxwidth));
    background-position: 0 calc(-312 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(49 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(49 / var(--screen-width) * var(--screen-maxwidth)));
  }
  77.14% {
    width: calc(298 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-596 / var(--screen-width) * var(--screen-maxwidth)) 0;
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(47 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(47 / var(--screen-width) * var(--screen-maxwidth)));
  }
  80.00% {
    width: calc(299 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(312 / var(--screen-width) * var(--screen-maxwidth));
    background-position: 0 0;
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(44 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(44 / var(--screen-width) * var(--screen-maxwidth)));
  }
  82.86% {
    width: calc(297 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-299 / var(--screen-width) * var(--screen-maxwidth)) 0;
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(42 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(42 / var(--screen-width) * var(--screen-maxwidth)));
  }
  85.71% {
    height: calc(308 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-297 / var(--screen-width) * var(--screen-maxwidth)) calc(-312 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(44 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(44 / var(--screen-width) * var(--screen-maxwidth)));
  }
  88.57% {
    width: calc(293 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(303 / var(--screen-width) * var(--screen-maxwidth));
    background-position: 0 calc(-621 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(47 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(47 / var(--screen-width) * var(--screen-maxwidth)));
  }
  91.43% {
    width: calc(286 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(295 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-879 / var(--screen-width) * var(--screen-maxwidth)) calc(-621 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(50 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(50 / var(--screen-width) * var(--screen-maxwidth)));
  }
  94.29% {
    width: calc(264 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(274 / var(--screen-width) * var(--screen-maxwidth));
    background-position: 0 calc(-1200 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(49 / var(--screen-width) * var(--screen-maxwidth)), calc(60 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(49 / var(--screen-width) * var(--screen-maxwidth)), calc(60 / var(--screen-width) * var(--screen-maxwidth)));
  }
  97.14%, 100% {
    width: calc(231 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(261 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1480 / var(--screen-width) * var(--screen-maxwidth)) 0;
    -webkit-transform: translate(calc(60 / var(--screen-width) * var(--screen-maxwidth)), calc(74 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(60 / var(--screen-width) * var(--screen-maxwidth)), calc(74 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@keyframes mdline {
  0% {
    width: calc(1 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(1 / var(--screen-width) * var(--screen-maxwidth));
  }
  2.86% {
    background-position: calc(-1706 / var(--screen-width) * var(--screen-maxwidth)) calc(-261 / var(--screen-width) * var(--screen-maxwidth));
  }
  5.71% {
    background-position: calc(-1707 / var(--screen-width) * var(--screen-maxwidth)) calc(-261 / var(--screen-width) * var(--screen-maxwidth));
  }
  8.57% {
    width: calc(62 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(67 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1378 / var(--screen-width) * var(--screen-maxwidth)) calc(-924 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(151 / var(--screen-width) * var(--screen-maxwidth)), calc(285 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(151 / var(--screen-width) * var(--screen-maxwidth)), calc(285 / var(--screen-width) * var(--screen-maxwidth)));
  }
  11.43% {
    width: calc(126 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(141 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-760 / var(--screen-width) * var(--screen-maxwidth)) calc(-1200 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(122 / var(--screen-width) * var(--screen-maxwidth)), calc(248 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(122 / var(--screen-width) * var(--screen-maxwidth)), calc(248 / var(--screen-width) * var(--screen-maxwidth)));
  }
  14.29% {
    width: calc(170 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(167 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1480 / var(--screen-width) * var(--screen-maxwidth)) calc(-1302 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(96 / var(--screen-width) * var(--screen-maxwidth)), calc(231 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(96 / var(--screen-width) * var(--screen-maxwidth)), calc(231 / var(--screen-width) * var(--screen-maxwidth)));
  }
  17.14% {
    width: calc(180 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(179 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1480 / var(--screen-width) * var(--screen-maxwidth)) calc(-1123 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(91 / var(--screen-width) * var(--screen-maxwidth)), calc(216 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(91 / var(--screen-width) * var(--screen-maxwidth)), calc(216 / var(--screen-width) * var(--screen-maxwidth)));
  }
  20.00% {
    width: calc(194 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(198 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1480 / var(--screen-width) * var(--screen-maxwidth)) calc(-925 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(85 / var(--screen-width) * var(--screen-maxwidth)), calc(199 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(85 / var(--screen-width) * var(--screen-maxwidth)), calc(199 / var(--screen-width) * var(--screen-maxwidth)));
  }
  22.86% {
    width: calc(198 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(209 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1480 / var(--screen-width) * var(--screen-maxwidth)) calc(-716 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(84 / var(--screen-width) * var(--screen-maxwidth)), calc(187 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(84 / var(--screen-width) * var(--screen-maxwidth)), calc(187 / var(--screen-width) * var(--screen-maxwidth)));
  }
  25.71% {
    width: calc(210 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(223 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1480 / var(--screen-width) * var(--screen-maxwidth)) calc(-493 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(79 / var(--screen-width) * var(--screen-maxwidth)), calc(169 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(79 / var(--screen-width) * var(--screen-maxwidth)), calc(169 / var(--screen-width) * var(--screen-maxwidth)));
  }
  28.57% {
    width: calc(225 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(232 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1480 / var(--screen-width) * var(--screen-maxwidth)) calc(-261 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(73 / var(--screen-width) * var(--screen-maxwidth)), calc(155 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(73 / var(--screen-width) * var(--screen-maxwidth)), calc(155 / var(--screen-width) * var(--screen-maxwidth)));
  }
  31.43% {
    width: calc(245 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(239 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-515 / var(--screen-width) * var(--screen-maxwidth)) calc(-1200 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(61 / var(--screen-width) * var(--screen-maxwidth)), calc(143 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(61 / var(--screen-width) * var(--screen-maxwidth)), calc(143 / var(--screen-width) * var(--screen-maxwidth)));
  }
  34.29% {
    width: calc(251 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(242 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-264 / var(--screen-width) * var(--screen-maxwidth)) calc(-1200 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(57 / var(--screen-width) * var(--screen-maxwidth)), calc(138 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(57 / var(--screen-width) * var(--screen-maxwidth)), calc(138 / var(--screen-width) * var(--screen-maxwidth)));
  }
  37.14% {
    width: calc(262 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(248 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1116 / var(--screen-width) * var(--screen-maxwidth)) calc(-924 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(52 / var(--screen-width) * var(--screen-maxwidth)), calc(128 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(52 / var(--screen-width) * var(--screen-maxwidth)), calc(128 / var(--screen-width) * var(--screen-maxwidth)));
  }
  40.00% {
    width: calc(273 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(255 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-843 / var(--screen-width) * var(--screen-maxwidth)) calc(-924 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(46 / var(--screen-width) * var(--screen-maxwidth)), calc(119 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(46 / var(--screen-width) * var(--screen-maxwidth)), calc(119 / var(--screen-width) * var(--screen-maxwidth)));
  }
  42.86% {
    width: calc(279 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(264 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-564 / var(--screen-width) * var(--screen-maxwidth)) calc(-924 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(107 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(107 / var(--screen-width) * var(--screen-maxwidth)));
  }
  45.71% {
    width: calc(281 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(269 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-283 / var(--screen-width) * var(--screen-maxwidth)) calc(-924 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(101 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(101 / var(--screen-width) * var(--screen-maxwidth)));
  }
  48.57% {
    width: calc(283 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(276 / var(--screen-width) * var(--screen-maxwidth));
    background-position: 0 calc(-924 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(92 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(92 / var(--screen-width) * var(--screen-maxwidth)));
  }
  51.43% {
    width: calc(287 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(282 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1190 / var(--screen-width) * var(--screen-maxwidth)) calc(-577 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(84 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(84 / var(--screen-width) * var(--screen-maxwidth)));
  }
  54.29% {
    width: calc(289 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(287 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1190 / var(--screen-width) * var(--screen-maxwidth)) calc(-290 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(76 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(76 / var(--screen-width) * var(--screen-maxwidth)));
  }
  57.14% {
    width: calc(290 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(290 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1190 / var(--screen-width) * var(--screen-maxwidth)) 0;
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(73 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(73 / var(--screen-width) * var(--screen-maxwidth)));
  }
  60.00% {
    width: calc(292 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(295 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-587 / var(--screen-width) * var(--screen-maxwidth)) calc(-621 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(67 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(67 / var(--screen-width) * var(--screen-maxwidth)));
  }
  62.86% {
    width: calc(294 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(299 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-293 / var(--screen-width) * var(--screen-maxwidth)) calc(-621 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(63 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(63 / var(--screen-width) * var(--screen-maxwidth)));
  }
  65.71% {
    width: calc(295 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(301 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-894 / var(--screen-width) * var(--screen-maxwidth)) calc(-302 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(59 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(59 / var(--screen-width) * var(--screen-maxwidth)));
  }
  68.57% {
    width: calc(296 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(302 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-894 / var(--screen-width) * var(--screen-maxwidth)) 0;
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(56 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(56 / var(--screen-width) * var(--screen-maxwidth)));
  }
  71.43% {
    width: calc(295 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(307 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-594 / var(--screen-width) * var(--screen-maxwidth)) calc(-312 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(52 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(52 / var(--screen-width) * var(--screen-maxwidth)));
  }
  74.29% {
    width: calc(297 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(309 / var(--screen-width) * var(--screen-maxwidth));
    background-position: 0 calc(-312 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(49 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(49 / var(--screen-width) * var(--screen-maxwidth)));
  }
  77.14% {
    width: calc(298 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-596 / var(--screen-width) * var(--screen-maxwidth)) 0;
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(47 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(47 / var(--screen-width) * var(--screen-maxwidth)));
  }
  80.00% {
    width: calc(299 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(312 / var(--screen-width) * var(--screen-maxwidth));
    background-position: 0 0;
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(44 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(44 / var(--screen-width) * var(--screen-maxwidth)));
  }
  82.86% {
    width: calc(297 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-299 / var(--screen-width) * var(--screen-maxwidth)) 0;
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(42 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(42 / var(--screen-width) * var(--screen-maxwidth)));
  }
  85.71% {
    height: calc(308 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-297 / var(--screen-width) * var(--screen-maxwidth)) calc(-312 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(44 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(44 / var(--screen-width) * var(--screen-maxwidth)));
  }
  88.57% {
    width: calc(293 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(303 / var(--screen-width) * var(--screen-maxwidth));
    background-position: 0 calc(-621 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(47 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(47 / var(--screen-width) * var(--screen-maxwidth)));
  }
  91.43% {
    width: calc(286 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(295 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-879 / var(--screen-width) * var(--screen-maxwidth)) calc(-621 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(50 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(44 / var(--screen-width) * var(--screen-maxwidth)), calc(50 / var(--screen-width) * var(--screen-maxwidth)));
  }
  94.29% {
    width: calc(264 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(274 / var(--screen-width) * var(--screen-maxwidth));
    background-position: 0 calc(-1200 / var(--screen-width) * var(--screen-maxwidth));
    -webkit-transform: translate(calc(49 / var(--screen-width) * var(--screen-maxwidth)), calc(60 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(49 / var(--screen-width) * var(--screen-maxwidth)), calc(60 / var(--screen-width) * var(--screen-maxwidth)));
  }
  97.14%, 100% {
    width: calc(231 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(261 / var(--screen-width) * var(--screen-maxwidth));
    background-position: calc(-1480 / var(--screen-width) * var(--screen-maxwidth)) 0;
    -webkit-transform: translate(calc(60 / var(--screen-width) * var(--screen-maxwidth)), calc(74 / var(--screen-width) * var(--screen-maxwidth)));
    transform: translate(calc(60 / var(--screen-width) * var(--screen-maxwidth)), calc(74 / var(--screen-width) * var(--screen-maxwidth)));
  }
}
@-webkit-keyframes lineani {
  0% {
    background-position: 0 0;
  }
  1.61% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-216 / var(--screen-width) * var(--screen-maxwidth));
  }
  3.23% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-432 / var(--screen-width) * var(--screen-maxwidth));
  }
  4.84% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(0 / var(--screen-width) * var(--screen-maxwidth));
  }
  6.45% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-216 / var(--screen-width) * var(--screen-maxwidth));
  }
  8.06% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-432 / var(--screen-width) * var(--screen-maxwidth));
  }
  9.68% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-648 / var(--screen-width) * var(--screen-maxwidth));
  }
  11.29% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-648 / var(--screen-width) * var(--screen-maxwidth));
  }
  12.90% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-864 / var(--screen-width) * var(--screen-maxwidth));
  }
  14.52% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-864 / var(--screen-width) * var(--screen-maxwidth));
  }
  16.13% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1080 / var(--screen-width) * var(--screen-maxwidth));
  }
  17.74% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-1080 / var(--screen-width) * var(--screen-maxwidth));
  }
  19.35% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(0 / var(--screen-width) * var(--screen-maxwidth));
  }
  20.97% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-216 / var(--screen-width) * var(--screen-maxwidth));
  }
  22.58% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-432 / var(--screen-width) * var(--screen-maxwidth));
  }
  24.19% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-648 / var(--screen-width) * var(--screen-maxwidth));
  }
  25.81% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-864 / var(--screen-width) * var(--screen-maxwidth));
  }
  27.42% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-1080 / var(--screen-width) * var(--screen-maxwidth));
  }
  29.03% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1296 / var(--screen-width) * var(--screen-maxwidth));
  }
  30.65% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-1296 / var(--screen-width) * var(--screen-maxwidth));
  }
  32.26% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-1296 / var(--screen-width) * var(--screen-maxwidth));
  }
  33.87% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1512 / var(--screen-width) * var(--screen-maxwidth));
  }
  35.48% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-1512 / var(--screen-width) * var(--screen-maxwidth));
  }
  37.10% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-1512 / var(--screen-width) * var(--screen-maxwidth));
  }
  38.71% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1728 / var(--screen-width) * var(--screen-maxwidth));
  }
  40.32% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-1728 / var(--screen-width) * var(--screen-maxwidth));
  }
  41.94% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-1728 / var(--screen-width) * var(--screen-maxwidth));
  }
  43.55% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1944 / var(--screen-width) * var(--screen-maxwidth));
  }
  45.16% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-1944 / var(--screen-width) * var(--screen-maxwidth));
  }
  46.77% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-1944 / var(--screen-width) * var(--screen-maxwidth));
  }
  48.39% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(0 / var(--screen-width) * var(--screen-maxwidth));
  }
  50.00% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-216 / var(--screen-width) * var(--screen-maxwidth));
  }
  51.61% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-432 / var(--screen-width) * var(--screen-maxwidth));
  }
  53.23% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-648 / var(--screen-width) * var(--screen-maxwidth));
  }
  54.84% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-864 / var(--screen-width) * var(--screen-maxwidth));
  }
  56.45% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-1080 / var(--screen-width) * var(--screen-maxwidth));
  }
  58.06% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-1296 / var(--screen-width) * var(--screen-maxwidth));
  }
  59.68% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-1512 / var(--screen-width) * var(--screen-maxwidth));
  }
  61.29% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-1728 / var(--screen-width) * var(--screen-maxwidth));
  }
  62.90% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-1944 / var(--screen-width) * var(--screen-maxwidth));
  }
  64.52% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-2160 / var(--screen-width) * var(--screen-maxwidth));
  }
  66.13% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-2160 / var(--screen-width) * var(--screen-maxwidth));
  }
  67.74% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-2160 / var(--screen-width) * var(--screen-maxwidth));
  }
  69.35% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-2160 / var(--screen-width) * var(--screen-maxwidth));
  }
  70.97% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-2376 / var(--screen-width) * var(--screen-maxwidth));
  }
  72.58% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-2376 / var(--screen-width) * var(--screen-maxwidth));
  }
  74.19% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-2376 / var(--screen-width) * var(--screen-maxwidth));
  }
  75.81% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-2376 / var(--screen-width) * var(--screen-maxwidth));
  }
  77.42% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-2592 / var(--screen-width) * var(--screen-maxwidth));
  }
  79.03% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-2592 / var(--screen-width) * var(--screen-maxwidth));
  }
  80.65% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-2592 / var(--screen-width) * var(--screen-maxwidth));
  }
  82.26% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-2592 / var(--screen-width) * var(--screen-maxwidth));
  }
  83.87% {
    background-position: calc(-3020 / var(--screen-width) * var(--screen-maxwidth)) calc(0 / var(--screen-width) * var(--screen-maxwidth));
  }
  85.48% {
    background-position: calc(-3020 / var(--screen-width) * var(--screen-maxwidth)) calc(-216 / var(--screen-width) * var(--screen-maxwidth));
  }
  87.10% {
    background-position: calc(-3020 / var(--screen-width) * var(--screen-maxwidth)) calc(-432 / var(--screen-width) * var(--screen-maxwidth));
  }
  88.71% {
    background-position: calc(-3020 / var(--screen-width) * var(--screen-maxwidth)) calc(-648 / var(--screen-width) * var(--screen-maxwidth));
  }
  90.32% {
    background-position: calc(-3020 / var(--screen-width) * var(--screen-maxwidth)) calc(-864 / var(--screen-width) * var(--screen-maxwidth));
  }
  91.94% {
    background-position: calc(-3020 / var(--screen-width) * var(--screen-maxwidth)) calc(-1080 / var(--screen-width) * var(--screen-maxwidth));
  }
  93.55% {
    background-position: calc(-3020 / var(--screen-width) * var(--screen-maxwidth)) calc(-1296 / var(--screen-width) * var(--screen-maxwidth));
  }
  95.16% {
    background-position: calc(-3020 / var(--screen-width) * var(--screen-maxwidth)) calc(-1512 / var(--screen-width) * var(--screen-maxwidth));
  }
  96.77% {
    background-position: calc(-3020 / var(--screen-width) * var(--screen-maxwidth)) calc(-1728 / var(--screen-width) * var(--screen-maxwidth));
  }
  98.39%, 100% {
    background-position: calc(-3020 / var(--screen-width) * var(--screen-maxwidth)) calc(-1944 / var(--screen-width) * var(--screen-maxwidth));
  }
}
@keyframes lineani {
  0% {
    background-position: 0 0;
  }
  1.61% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-216 / var(--screen-width) * var(--screen-maxwidth));
  }
  3.23% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-432 / var(--screen-width) * var(--screen-maxwidth));
  }
  4.84% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(0 / var(--screen-width) * var(--screen-maxwidth));
  }
  6.45% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-216 / var(--screen-width) * var(--screen-maxwidth));
  }
  8.06% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-432 / var(--screen-width) * var(--screen-maxwidth));
  }
  9.68% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-648 / var(--screen-width) * var(--screen-maxwidth));
  }
  11.29% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-648 / var(--screen-width) * var(--screen-maxwidth));
  }
  12.90% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-864 / var(--screen-width) * var(--screen-maxwidth));
  }
  14.52% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-864 / var(--screen-width) * var(--screen-maxwidth));
  }
  16.13% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1080 / var(--screen-width) * var(--screen-maxwidth));
  }
  17.74% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-1080 / var(--screen-width) * var(--screen-maxwidth));
  }
  19.35% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(0 / var(--screen-width) * var(--screen-maxwidth));
  }
  20.97% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-216 / var(--screen-width) * var(--screen-maxwidth));
  }
  22.58% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-432 / var(--screen-width) * var(--screen-maxwidth));
  }
  24.19% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-648 / var(--screen-width) * var(--screen-maxwidth));
  }
  25.81% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-864 / var(--screen-width) * var(--screen-maxwidth));
  }
  27.42% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-1080 / var(--screen-width) * var(--screen-maxwidth));
  }
  29.03% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1296 / var(--screen-width) * var(--screen-maxwidth));
  }
  30.65% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-1296 / var(--screen-width) * var(--screen-maxwidth));
  }
  32.26% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-1296 / var(--screen-width) * var(--screen-maxwidth));
  }
  33.87% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1512 / var(--screen-width) * var(--screen-maxwidth));
  }
  35.48% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-1512 / var(--screen-width) * var(--screen-maxwidth));
  }
  37.10% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-1512 / var(--screen-width) * var(--screen-maxwidth));
  }
  38.71% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1728 / var(--screen-width) * var(--screen-maxwidth));
  }
  40.32% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-1728 / var(--screen-width) * var(--screen-maxwidth));
  }
  41.94% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-1728 / var(--screen-width) * var(--screen-maxwidth));
  }
  43.55% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1944 / var(--screen-width) * var(--screen-maxwidth));
  }
  45.16% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-1944 / var(--screen-width) * var(--screen-maxwidth));
  }
  46.77% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-1944 / var(--screen-width) * var(--screen-maxwidth));
  }
  48.39% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(0 / var(--screen-width) * var(--screen-maxwidth));
  }
  50.00% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-216 / var(--screen-width) * var(--screen-maxwidth));
  }
  51.61% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-432 / var(--screen-width) * var(--screen-maxwidth));
  }
  53.23% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-648 / var(--screen-width) * var(--screen-maxwidth));
  }
  54.84% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-864 / var(--screen-width) * var(--screen-maxwidth));
  }
  56.45% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-1080 / var(--screen-width) * var(--screen-maxwidth));
  }
  58.06% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-1296 / var(--screen-width) * var(--screen-maxwidth));
  }
  59.68% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-1512 / var(--screen-width) * var(--screen-maxwidth));
  }
  61.29% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-1728 / var(--screen-width) * var(--screen-maxwidth));
  }
  62.90% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-1944 / var(--screen-width) * var(--screen-maxwidth));
  }
  64.52% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-2160 / var(--screen-width) * var(--screen-maxwidth));
  }
  66.13% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-2160 / var(--screen-width) * var(--screen-maxwidth));
  }
  67.74% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-2160 / var(--screen-width) * var(--screen-maxwidth));
  }
  69.35% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-2160 / var(--screen-width) * var(--screen-maxwidth));
  }
  70.97% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-2376 / var(--screen-width) * var(--screen-maxwidth));
  }
  72.58% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-2376 / var(--screen-width) * var(--screen-maxwidth));
  }
  74.19% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-2376 / var(--screen-width) * var(--screen-maxwidth));
  }
  75.81% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-2376 / var(--screen-width) * var(--screen-maxwidth));
  }
  77.42% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-2592 / var(--screen-width) * var(--screen-maxwidth));
  }
  79.03% {
    background-position: calc(-755 / var(--screen-width) * var(--screen-maxwidth)) calc(-2592 / var(--screen-width) * var(--screen-maxwidth));
  }
  80.65% {
    background-position: calc(-1510 / var(--screen-width) * var(--screen-maxwidth)) calc(-2592 / var(--screen-width) * var(--screen-maxwidth));
  }
  82.26% {
    background-position: calc(-2265 / var(--screen-width) * var(--screen-maxwidth)) calc(-2592 / var(--screen-width) * var(--screen-maxwidth));
  }
  83.87% {
    background-position: calc(-3020 / var(--screen-width) * var(--screen-maxwidth)) calc(0 / var(--screen-width) * var(--screen-maxwidth));
  }
  85.48% {
    background-position: calc(-3020 / var(--screen-width) * var(--screen-maxwidth)) calc(-216 / var(--screen-width) * var(--screen-maxwidth));
  }
  87.10% {
    background-position: calc(-3020 / var(--screen-width) * var(--screen-maxwidth)) calc(-432 / var(--screen-width) * var(--screen-maxwidth));
  }
  88.71% {
    background-position: calc(-3020 / var(--screen-width) * var(--screen-maxwidth)) calc(-648 / var(--screen-width) * var(--screen-maxwidth));
  }
  90.32% {
    background-position: calc(-3020 / var(--screen-width) * var(--screen-maxwidth)) calc(-864 / var(--screen-width) * var(--screen-maxwidth));
  }
  91.94% {
    background-position: calc(-3020 / var(--screen-width) * var(--screen-maxwidth)) calc(-1080 / var(--screen-width) * var(--screen-maxwidth));
  }
  93.55% {
    background-position: calc(-3020 / var(--screen-width) * var(--screen-maxwidth)) calc(-1296 / var(--screen-width) * var(--screen-maxwidth));
  }
  95.16% {
    background-position: calc(-3020 / var(--screen-width) * var(--screen-maxwidth)) calc(-1512 / var(--screen-width) * var(--screen-maxwidth));
  }
  96.77% {
    background-position: calc(-3020 / var(--screen-width) * var(--screen-maxwidth)) calc(-1728 / var(--screen-width) * var(--screen-maxwidth));
  }
  98.39%, 100% {
    background-position: calc(-3020 / var(--screen-width) * var(--screen-maxwidth)) calc(-1944 / var(--screen-width) * var(--screen-maxwidth));
  }
}
@-webkit-keyframes btnmore {
  0% {
    width: calc(426 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(122 / var(--screen-width) * var(--screen-maxwidth));
    background-image: url("../img/btnmore.png");
    background-size: calc(2556 / var(--screen-width) * var(--screen-maxwidth)) calc(2196 / var(--screen-width) * var(--screen-maxwidth));
  }
  0.93% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-122 / var(--screen-width) * var(--screen-maxwidth));
  }
  1.85% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-244 / var(--screen-width) * var(--screen-maxwidth));
  }
  2.78% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(0 / var(--screen-width) * var(--screen-maxwidth));
  }
  3.70% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-122 / var(--screen-width) * var(--screen-maxwidth));
  }
  4.63% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-244 / var(--screen-width) * var(--screen-maxwidth));
  }
  5.56% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-366 / var(--screen-width) * var(--screen-maxwidth));
  }
  6.48% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-366 / var(--screen-width) * var(--screen-maxwidth));
  }
  7.41% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-488 / var(--screen-width) * var(--screen-maxwidth));
  }
  8.33% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-488 / var(--screen-width) * var(--screen-maxwidth));
  }
  9.26% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-610 / var(--screen-width) * var(--screen-maxwidth));
  }
  10.19% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-610 / var(--screen-width) * var(--screen-maxwidth));
  }
  11.11% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(0 / var(--screen-width) * var(--screen-maxwidth));
  }
  12.04% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-122 / var(--screen-width) * var(--screen-maxwidth));
  }
  12.96% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-244 / var(--screen-width) * var(--screen-maxwidth));
  }
  13.89% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-366 / var(--screen-width) * var(--screen-maxwidth));
  }
  14.81% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-488 / var(--screen-width) * var(--screen-maxwidth));
  }
  15.74% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-610 / var(--screen-width) * var(--screen-maxwidth));
  }
  16.67% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-732 / var(--screen-width) * var(--screen-maxwidth));
  }
  17.59% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-732 / var(--screen-width) * var(--screen-maxwidth));
  }
  18.52% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-732 / var(--screen-width) * var(--screen-maxwidth));
  }
  19.44% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-854 / var(--screen-width) * var(--screen-maxwidth));
  }
  20.37% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-854 / var(--screen-width) * var(--screen-maxwidth));
  }
  21.30% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-854 / var(--screen-width) * var(--screen-maxwidth));
  }
  22.22% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-976 / var(--screen-width) * var(--screen-maxwidth));
  }
  23.15% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-976 / var(--screen-width) * var(--screen-maxwidth));
  }
  24.07% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-976 / var(--screen-width) * var(--screen-maxwidth));
  }
  25.00% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1098 / var(--screen-width) * var(--screen-maxwidth));
  }
  25.93% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-1098 / var(--screen-width) * var(--screen-maxwidth));
  }
  26.85% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-1098 / var(--screen-width) * var(--screen-maxwidth));
  }
  27.78% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(0 / var(--screen-width) * var(--screen-maxwidth));
  }
  28.70% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-122 / var(--screen-width) * var(--screen-maxwidth));
  }
  29.63% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-244 / var(--screen-width) * var(--screen-maxwidth));
  }
  30.56% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-366 / var(--screen-width) * var(--screen-maxwidth));
  }
  31.48% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-488 / var(--screen-width) * var(--screen-maxwidth));
  }
  32.41% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-610 / var(--screen-width) * var(--screen-maxwidth));
  }
  33.33% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-732 / var(--screen-width) * var(--screen-maxwidth));
  }
  34.26% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-854 / var(--screen-width) * var(--screen-maxwidth));
  }
  35.19% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-976 / var(--screen-width) * var(--screen-maxwidth));
  }
  36.11% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-1098 / var(--screen-width) * var(--screen-maxwidth));
  }
  37.04% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1220 / var(--screen-width) * var(--screen-maxwidth));
  }
  37.96% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-1220 / var(--screen-width) * var(--screen-maxwidth));
  }
  38.89% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-1220 / var(--screen-width) * var(--screen-maxwidth));
  }
  39.81% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-1220 / var(--screen-width) * var(--screen-maxwidth));
  }
  40.74% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1342 / var(--screen-width) * var(--screen-maxwidth));
  }
  41.67% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-1342 / var(--screen-width) * var(--screen-maxwidth));
  }
  42.59% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-1342 / var(--screen-width) * var(--screen-maxwidth));
  }
  43.52% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-1342 / var(--screen-width) * var(--screen-maxwidth));
  }
  44.44% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1464 / var(--screen-width) * var(--screen-maxwidth));
  }
  45.37% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-1464 / var(--screen-width) * var(--screen-maxwidth));
  }
  46.30% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-1464 / var(--screen-width) * var(--screen-maxwidth));
  }
  47.22% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-1464 / var(--screen-width) * var(--screen-maxwidth));
  }
  48.15% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(0 / var(--screen-width) * var(--screen-maxwidth));
  }
  49.07% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-122 / var(--screen-width) * var(--screen-maxwidth));
  }
  50.00% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-244 / var(--screen-width) * var(--screen-maxwidth));
  }
  50.93% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-366 / var(--screen-width) * var(--screen-maxwidth));
  }
  51.85% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-488 / var(--screen-width) * var(--screen-maxwidth));
  }
  52.78% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-610 / var(--screen-width) * var(--screen-maxwidth));
  }
  53.70% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-732 / var(--screen-width) * var(--screen-maxwidth));
  }
  54.63% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-854 / var(--screen-width) * var(--screen-maxwidth));
  }
  55.56% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-976 / var(--screen-width) * var(--screen-maxwidth));
  }
  56.48% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-1098 / var(--screen-width) * var(--screen-maxwidth));
  }
  57.41% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-1220 / var(--screen-width) * var(--screen-maxwidth));
  }
  58.33% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-1342 / var(--screen-width) * var(--screen-maxwidth));
  }
  59.26% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-1464 / var(--screen-width) * var(--screen-maxwidth));
  }
  60.19% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1586 / var(--screen-width) * var(--screen-maxwidth));
  }
  61.11% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-1586 / var(--screen-width) * var(--screen-maxwidth));
  }
  62.04% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-1586 / var(--screen-width) * var(--screen-maxwidth));
  }
  62.96% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-1586 / var(--screen-width) * var(--screen-maxwidth));
  }
  63.89% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-1586 / var(--screen-width) * var(--screen-maxwidth));
  }
  64.81% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1708 / var(--screen-width) * var(--screen-maxwidth));
  }
  65.74% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-1708 / var(--screen-width) * var(--screen-maxwidth));
  }
  66.67% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-1708 / var(--screen-width) * var(--screen-maxwidth));
  }
  67.59% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-1708 / var(--screen-width) * var(--screen-maxwidth));
  }
  68.52% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-1708 / var(--screen-width) * var(--screen-maxwidth));
  }
  69.44% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1830 / var(--screen-width) * var(--screen-maxwidth));
  }
  70.37% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-1830 / var(--screen-width) * var(--screen-maxwidth));
  }
  71.30% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-1830 / var(--screen-width) * var(--screen-maxwidth));
  }
  72.22% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-1830 / var(--screen-width) * var(--screen-maxwidth));
  }
  73.15% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-1830 / var(--screen-width) * var(--screen-maxwidth));
  }
  74.07% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1952 / var(--screen-width) * var(--screen-maxwidth));
  }
  75.00% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-1952 / var(--screen-width) * var(--screen-maxwidth));
  }
  75.93% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-1952 / var(--screen-width) * var(--screen-maxwidth));
  }
  76.85% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-1952 / var(--screen-width) * var(--screen-maxwidth));
  }
  77.78% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-1952 / var(--screen-width) * var(--screen-maxwidth));
  }
  78.70% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(0 / var(--screen-width) * var(--screen-maxwidth));
  }
  79.63% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-122 / var(--screen-width) * var(--screen-maxwidth));
  }
  80.56% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-244 / var(--screen-width) * var(--screen-maxwidth));
  }
  81.48% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-366 / var(--screen-width) * var(--screen-maxwidth));
  }
  82.41% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-488 / var(--screen-width) * var(--screen-maxwidth));
  }
  83.33% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-610 / var(--screen-width) * var(--screen-maxwidth));
  }
  84.26% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-732 / var(--screen-width) * var(--screen-maxwidth));
  }
  85.19% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-854 / var(--screen-width) * var(--screen-maxwidth));
  }
  86.11% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-976 / var(--screen-width) * var(--screen-maxwidth));
  }
  87.04% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-1098 / var(--screen-width) * var(--screen-maxwidth));
  }
  87.96% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-1220 / var(--screen-width) * var(--screen-maxwidth));
  }
  88.89% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-1342 / var(--screen-width) * var(--screen-maxwidth));
  }
  89.81% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-1464 / var(--screen-width) * var(--screen-maxwidth));
  }
  90.74% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-1586 / var(--screen-width) * var(--screen-maxwidth));
  }
  91.67% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-1708 / var(--screen-width) * var(--screen-maxwidth));
  }
  92.59% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-1830 / var(--screen-width) * var(--screen-maxwidth));
  }
  93.52% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-1952 / var(--screen-width) * var(--screen-maxwidth));
  }
  94.44% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-2074 / var(--screen-width) * var(--screen-maxwidth));
  }
  95.37% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-2074 / var(--screen-width) * var(--screen-maxwidth));
  }
  96.30% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-2074 / var(--screen-width) * var(--screen-maxwidth));
  }
  97.22% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-2074 / var(--screen-width) * var(--screen-maxwidth));
  }
  98.15% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-2074 / var(--screen-width) * var(--screen-maxwidth));
  }
  99.07%, 100% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-2074 / var(--screen-width) * var(--screen-maxwidth));
  }
}
@keyframes btnmore {
  0% {
    width: calc(426 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(122 / var(--screen-width) * var(--screen-maxwidth));
    background-image: url("../img/btnmore.png");
    background-size: calc(2556 / var(--screen-width) * var(--screen-maxwidth)) calc(2196 / var(--screen-width) * var(--screen-maxwidth));
  }
  0.93% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-122 / var(--screen-width) * var(--screen-maxwidth));
  }
  1.85% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-244 / var(--screen-width) * var(--screen-maxwidth));
  }
  2.78% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(0 / var(--screen-width) * var(--screen-maxwidth));
  }
  3.70% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-122 / var(--screen-width) * var(--screen-maxwidth));
  }
  4.63% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-244 / var(--screen-width) * var(--screen-maxwidth));
  }
  5.56% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-366 / var(--screen-width) * var(--screen-maxwidth));
  }
  6.48% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-366 / var(--screen-width) * var(--screen-maxwidth));
  }
  7.41% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-488 / var(--screen-width) * var(--screen-maxwidth));
  }
  8.33% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-488 / var(--screen-width) * var(--screen-maxwidth));
  }
  9.26% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-610 / var(--screen-width) * var(--screen-maxwidth));
  }
  10.19% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-610 / var(--screen-width) * var(--screen-maxwidth));
  }
  11.11% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(0 / var(--screen-width) * var(--screen-maxwidth));
  }
  12.04% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-122 / var(--screen-width) * var(--screen-maxwidth));
  }
  12.96% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-244 / var(--screen-width) * var(--screen-maxwidth));
  }
  13.89% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-366 / var(--screen-width) * var(--screen-maxwidth));
  }
  14.81% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-488 / var(--screen-width) * var(--screen-maxwidth));
  }
  15.74% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-610 / var(--screen-width) * var(--screen-maxwidth));
  }
  16.67% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-732 / var(--screen-width) * var(--screen-maxwidth));
  }
  17.59% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-732 / var(--screen-width) * var(--screen-maxwidth));
  }
  18.52% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-732 / var(--screen-width) * var(--screen-maxwidth));
  }
  19.44% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-854 / var(--screen-width) * var(--screen-maxwidth));
  }
  20.37% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-854 / var(--screen-width) * var(--screen-maxwidth));
  }
  21.30% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-854 / var(--screen-width) * var(--screen-maxwidth));
  }
  22.22% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-976 / var(--screen-width) * var(--screen-maxwidth));
  }
  23.15% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-976 / var(--screen-width) * var(--screen-maxwidth));
  }
  24.07% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-976 / var(--screen-width) * var(--screen-maxwidth));
  }
  25.00% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1098 / var(--screen-width) * var(--screen-maxwidth));
  }
  25.93% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-1098 / var(--screen-width) * var(--screen-maxwidth));
  }
  26.85% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-1098 / var(--screen-width) * var(--screen-maxwidth));
  }
  27.78% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(0 / var(--screen-width) * var(--screen-maxwidth));
  }
  28.70% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-122 / var(--screen-width) * var(--screen-maxwidth));
  }
  29.63% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-244 / var(--screen-width) * var(--screen-maxwidth));
  }
  30.56% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-366 / var(--screen-width) * var(--screen-maxwidth));
  }
  31.48% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-488 / var(--screen-width) * var(--screen-maxwidth));
  }
  32.41% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-610 / var(--screen-width) * var(--screen-maxwidth));
  }
  33.33% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-732 / var(--screen-width) * var(--screen-maxwidth));
  }
  34.26% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-854 / var(--screen-width) * var(--screen-maxwidth));
  }
  35.19% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-976 / var(--screen-width) * var(--screen-maxwidth));
  }
  36.11% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-1098 / var(--screen-width) * var(--screen-maxwidth));
  }
  37.04% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1220 / var(--screen-width) * var(--screen-maxwidth));
  }
  37.96% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-1220 / var(--screen-width) * var(--screen-maxwidth));
  }
  38.89% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-1220 / var(--screen-width) * var(--screen-maxwidth));
  }
  39.81% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-1220 / var(--screen-width) * var(--screen-maxwidth));
  }
  40.74% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1342 / var(--screen-width) * var(--screen-maxwidth));
  }
  41.67% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-1342 / var(--screen-width) * var(--screen-maxwidth));
  }
  42.59% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-1342 / var(--screen-width) * var(--screen-maxwidth));
  }
  43.52% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-1342 / var(--screen-width) * var(--screen-maxwidth));
  }
  44.44% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1464 / var(--screen-width) * var(--screen-maxwidth));
  }
  45.37% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-1464 / var(--screen-width) * var(--screen-maxwidth));
  }
  46.30% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-1464 / var(--screen-width) * var(--screen-maxwidth));
  }
  47.22% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-1464 / var(--screen-width) * var(--screen-maxwidth));
  }
  48.15% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(0 / var(--screen-width) * var(--screen-maxwidth));
  }
  49.07% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-122 / var(--screen-width) * var(--screen-maxwidth));
  }
  50.00% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-244 / var(--screen-width) * var(--screen-maxwidth));
  }
  50.93% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-366 / var(--screen-width) * var(--screen-maxwidth));
  }
  51.85% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-488 / var(--screen-width) * var(--screen-maxwidth));
  }
  52.78% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-610 / var(--screen-width) * var(--screen-maxwidth));
  }
  53.70% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-732 / var(--screen-width) * var(--screen-maxwidth));
  }
  54.63% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-854 / var(--screen-width) * var(--screen-maxwidth));
  }
  55.56% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-976 / var(--screen-width) * var(--screen-maxwidth));
  }
  56.48% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-1098 / var(--screen-width) * var(--screen-maxwidth));
  }
  57.41% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-1220 / var(--screen-width) * var(--screen-maxwidth));
  }
  58.33% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-1342 / var(--screen-width) * var(--screen-maxwidth));
  }
  59.26% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-1464 / var(--screen-width) * var(--screen-maxwidth));
  }
  60.19% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1586 / var(--screen-width) * var(--screen-maxwidth));
  }
  61.11% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-1586 / var(--screen-width) * var(--screen-maxwidth));
  }
  62.04% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-1586 / var(--screen-width) * var(--screen-maxwidth));
  }
  62.96% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-1586 / var(--screen-width) * var(--screen-maxwidth));
  }
  63.89% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-1586 / var(--screen-width) * var(--screen-maxwidth));
  }
  64.81% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1708 / var(--screen-width) * var(--screen-maxwidth));
  }
  65.74% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-1708 / var(--screen-width) * var(--screen-maxwidth));
  }
  66.67% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-1708 / var(--screen-width) * var(--screen-maxwidth));
  }
  67.59% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-1708 / var(--screen-width) * var(--screen-maxwidth));
  }
  68.52% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-1708 / var(--screen-width) * var(--screen-maxwidth));
  }
  69.44% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1830 / var(--screen-width) * var(--screen-maxwidth));
  }
  70.37% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-1830 / var(--screen-width) * var(--screen-maxwidth));
  }
  71.30% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-1830 / var(--screen-width) * var(--screen-maxwidth));
  }
  72.22% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-1830 / var(--screen-width) * var(--screen-maxwidth));
  }
  73.15% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-1830 / var(--screen-width) * var(--screen-maxwidth));
  }
  74.07% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-1952 / var(--screen-width) * var(--screen-maxwidth));
  }
  75.00% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-1952 / var(--screen-width) * var(--screen-maxwidth));
  }
  75.93% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-1952 / var(--screen-width) * var(--screen-maxwidth));
  }
  76.85% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-1952 / var(--screen-width) * var(--screen-maxwidth));
  }
  77.78% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-1952 / var(--screen-width) * var(--screen-maxwidth));
  }
  78.70% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(0 / var(--screen-width) * var(--screen-maxwidth));
  }
  79.63% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-122 / var(--screen-width) * var(--screen-maxwidth));
  }
  80.56% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-244 / var(--screen-width) * var(--screen-maxwidth));
  }
  81.48% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-366 / var(--screen-width) * var(--screen-maxwidth));
  }
  82.41% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-488 / var(--screen-width) * var(--screen-maxwidth));
  }
  83.33% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-610 / var(--screen-width) * var(--screen-maxwidth));
  }
  84.26% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-732 / var(--screen-width) * var(--screen-maxwidth));
  }
  85.19% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-854 / var(--screen-width) * var(--screen-maxwidth));
  }
  86.11% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-976 / var(--screen-width) * var(--screen-maxwidth));
  }
  87.04% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-1098 / var(--screen-width) * var(--screen-maxwidth));
  }
  87.96% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-1220 / var(--screen-width) * var(--screen-maxwidth));
  }
  88.89% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-1342 / var(--screen-width) * var(--screen-maxwidth));
  }
  89.81% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-1464 / var(--screen-width) * var(--screen-maxwidth));
  }
  90.74% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-1586 / var(--screen-width) * var(--screen-maxwidth));
  }
  91.67% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-1708 / var(--screen-width) * var(--screen-maxwidth));
  }
  92.59% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-1830 / var(--screen-width) * var(--screen-maxwidth));
  }
  93.52% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-1952 / var(--screen-width) * var(--screen-maxwidth));
  }
  94.44% {
    background-position: calc(0 / var(--screen-width) * var(--screen-maxwidth)) calc(-2074 / var(--screen-width) * var(--screen-maxwidth));
  }
  95.37% {
    background-position: calc(-426 / var(--screen-width) * var(--screen-maxwidth)) calc(-2074 / var(--screen-width) * var(--screen-maxwidth));
  }
  96.30% {
    background-position: calc(-852 / var(--screen-width) * var(--screen-maxwidth)) calc(-2074 / var(--screen-width) * var(--screen-maxwidth));
  }
  97.22% {
    background-position: calc(-1278 / var(--screen-width) * var(--screen-maxwidth)) calc(-2074 / var(--screen-width) * var(--screen-maxwidth));
  }
  98.15% {
    background-position: calc(-1704 / var(--screen-width) * var(--screen-maxwidth)) calc(-2074 / var(--screen-width) * var(--screen-maxwidth));
  }
  99.07%, 100% {
    background-position: calc(-2130 / var(--screen-width) * var(--screen-maxwidth)) calc(-2074 / var(--screen-width) * var(--screen-maxwidth));
  }
}
@-webkit-keyframes hdjoinbtn {
  0% {
    width: 28vh;
    height: 9vh;
    background-image: url("../img/hdjoinbtn.png");
    background-size: 196vh 162vh;
  }
  0.92% {
    background-position: 0vh -9vh;
  }
  1.83% {
    background-position: 0vh -18vh;
  }
  2.75% {
    background-position: -28vh 0vh;
  }
  3.67% {
    background-position: -28vh -9vh;
  }
  4.59% {
    background-position: -28vh -18vh;
  }
  5.50% {
    background-position: 0vh -27vh;
  }
  6.42% {
    background-position: -28vh -27vh;
  }
  7.34% {
    background-position: 0vh -36vh;
  }
  8.26% {
    background-position: -28vh -36vh;
  }
  9.17% {
    background-position: 0vh -45vh;
  }
  10.09% {
    background-position: -28vh -45vh;
  }
  11.01% {
    background-position: -56vh 0vh;
  }
  11.93% {
    background-position: -56vh -9vh;
  }
  12.84% {
    background-position: -56vh -18vh;
  }
  13.76% {
    background-position: -56vh -27vh;
  }
  14.68% {
    background-position: -56vh -36vh;
  }
  15.60% {
    background-position: -56vh -45vh;
  }
  16.51% {
    background-position: 0vh -54vh;
  }
  17.43% {
    background-position: -28vh -54vh;
  }
  18.35% {
    background-position: -56vh -54vh;
  }
  19.27% {
    background-position: 0vh -63vh;
  }
  20.18% {
    background-position: -28vh -63vh;
  }
  21.10% {
    background-position: -56vh -63vh;
  }
  22.02% {
    background-position: 0vh -72vh;
  }
  22.94% {
    background-position: -28vh -72vh;
  }
  23.85% {
    background-position: -56vh -72vh;
  }
  24.77% {
    background-position: -84vh 0vh;
  }
  25.69% {
    background-position: -84vh -9vh;
  }
  26.61% {
    background-position: -84vh -18vh;
  }
  27.52% {
    background-position: -84vh -27vh;
  }
  28.44% {
    background-position: -84vh -36vh;
  }
  29.36% {
    background-position: -84vh -45vh;
  }
  30.28% {
    background-position: -84vh -54vh;
  }
  31.19% {
    background-position: -84vh -63vh;
  }
  32.11% {
    background-position: -84vh -72vh;
  }
  33.03% {
    background-position: 0vh -81vh;
  }
  33.94% {
    background-position: -28vh -81vh;
  }
  34.86% {
    background-position: -56vh -81vh;
  }
  35.78% {
    background-position: -84vh -81vh;
  }
  36.70% {
    background-position: 0vh -90vh;
  }
  37.61% {
    background-position: -28vh -90vh;
  }
  38.53% {
    background-position: -56vh -90vh;
  }
  39.45% {
    background-position: -84vh -90vh;
  }
  40.37% {
    background-position: 0vh -99vh;
  }
  41.28% {
    background-position: -28vh -99vh;
  }
  42.20% {
    background-position: -56vh -99vh;
  }
  43.12% {
    background-position: -84vh -99vh;
  }
  44.04% {
    background-position: -112vh 0vh;
  }
  44.95% {
    background-position: -112vh -9vh;
  }
  45.87% {
    background-position: -112vh -18vh;
  }
  46.79% {
    background-position: -112vh -27vh;
  }
  47.71% {
    background-position: -112vh -36vh;
  }
  48.62% {
    background-position: -112vh -45vh;
  }
  49.54% {
    background-position: -112vh -54vh;
  }
  50.46% {
    background-position: -112vh -63vh;
  }
  51.38% {
    background-position: -112vh -72vh;
  }
  52.29% {
    background-position: -112vh -81vh;
  }
  53.21% {
    background-position: -112vh -90vh;
  }
  54.13% {
    background-position: -112vh -99vh;
  }
  55.05% {
    background-position: 0vh -108vh;
  }
  55.96% {
    background-position: -28vh -108vh;
  }
  56.88% {
    background-position: -56vh -108vh;
  }
  57.80% {
    background-position: -84vh -108vh;
  }
  58.72% {
    background-position: -112vh -108vh;
  }
  59.63% {
    background-position: 0vh -117vh;
  }
  60.55% {
    background-position: -28vh -117vh;
  }
  61.47% {
    background-position: -56vh -117vh;
  }
  62.39% {
    background-position: -84vh -117vh;
  }
  63.30% {
    background-position: -112vh -117vh;
  }
  64.22% {
    background-position: 0vh -126vh;
  }
  65.14% {
    background-position: -28vh -126vh;
  }
  66.06% {
    background-position: -56vh -126vh;
  }
  66.97% {
    background-position: -84vh -126vh;
  }
  67.89% {
    background-position: -112vh -126vh;
  }
  68.81% {
    background-position: -140vh 0vh;
  }
  69.72% {
    background-position: -140vh -9vh;
  }
  70.64% {
    background-position: -140vh -18vh;
  }
  71.56% {
    background-position: -140vh -27vh;
  }
  72.48% {
    background-position: -140vh -36vh;
  }
  73.39% {
    background-position: -140vh -45vh;
  }
  74.31% {
    background-position: -140vh -54vh;
  }
  75.23% {
    background-position: -140vh -63vh;
  }
  76.15% {
    background-position: -140vh -72vh;
  }
  77.06% {
    background-position: -140vh -81vh;
  }
  77.98% {
    background-position: -140vh -90vh;
  }
  78.90% {
    background-position: -140vh -99vh;
  }
  79.82% {
    background-position: -140vh -108vh;
  }
  80.73% {
    background-position: -140vh -117vh;
  }
  81.65% {
    background-position: -140vh -126vh;
  }
  82.57% {
    background-position: 0vh -135vh;
  }
  83.49% {
    background-position: -28vh -135vh;
  }
  84.40% {
    background-position: -56vh -135vh;
  }
  85.32% {
    background-position: -84vh -135vh;
  }
  86.24% {
    background-position: -112vh -135vh;
  }
  87.16% {
    background-position: -140vh -135vh;
  }
  88.07% {
    background-position: 0vh -144vh;
  }
  88.99% {
    background-position: -28vh -144vh;
  }
  89.91% {
    background-position: -56vh -144vh;
  }
  90.83% {
    background-position: -84vh -144vh;
  }
  91.74% {
    background-position: -112vh -144vh;
  }
  92.66% {
    background-position: -140vh -144vh;
  }
  93.58% {
    background-position: 0vh -153vh;
  }
  94.50% {
    background-position: -28vh -153vh;
  }
  95.41% {
    background-position: -56vh -153vh;
  }
  96.33% {
    background-position: -84vh -153vh;
  }
  97.25% {
    background-position: -112vh -153vh;
  }
  98.17% {
    background-position: -140vh -153vh;
  }
  99.08%, 100% {
    background-position: -168vh 0vh;
  }
}
@keyframes hdjoinbtn {
  0% {
    width: 28vh;
    height: 9vh;
    background-image: url("../img/hdjoinbtn.png");
    background-size: 196vh 162vh;
  }
  0.92% {
    background-position: 0vh -9vh;
  }
  1.83% {
    background-position: 0vh -18vh;
  }
  2.75% {
    background-position: -28vh 0vh;
  }
  3.67% {
    background-position: -28vh -9vh;
  }
  4.59% {
    background-position: -28vh -18vh;
  }
  5.50% {
    background-position: 0vh -27vh;
  }
  6.42% {
    background-position: -28vh -27vh;
  }
  7.34% {
    background-position: 0vh -36vh;
  }
  8.26% {
    background-position: -28vh -36vh;
  }
  9.17% {
    background-position: 0vh -45vh;
  }
  10.09% {
    background-position: -28vh -45vh;
  }
  11.01% {
    background-position: -56vh 0vh;
  }
  11.93% {
    background-position: -56vh -9vh;
  }
  12.84% {
    background-position: -56vh -18vh;
  }
  13.76% {
    background-position: -56vh -27vh;
  }
  14.68% {
    background-position: -56vh -36vh;
  }
  15.60% {
    background-position: -56vh -45vh;
  }
  16.51% {
    background-position: 0vh -54vh;
  }
  17.43% {
    background-position: -28vh -54vh;
  }
  18.35% {
    background-position: -56vh -54vh;
  }
  19.27% {
    background-position: 0vh -63vh;
  }
  20.18% {
    background-position: -28vh -63vh;
  }
  21.10% {
    background-position: -56vh -63vh;
  }
  22.02% {
    background-position: 0vh -72vh;
  }
  22.94% {
    background-position: -28vh -72vh;
  }
  23.85% {
    background-position: -56vh -72vh;
  }
  24.77% {
    background-position: -84vh 0vh;
  }
  25.69% {
    background-position: -84vh -9vh;
  }
  26.61% {
    background-position: -84vh -18vh;
  }
  27.52% {
    background-position: -84vh -27vh;
  }
  28.44% {
    background-position: -84vh -36vh;
  }
  29.36% {
    background-position: -84vh -45vh;
  }
  30.28% {
    background-position: -84vh -54vh;
  }
  31.19% {
    background-position: -84vh -63vh;
  }
  32.11% {
    background-position: -84vh -72vh;
  }
  33.03% {
    background-position: 0vh -81vh;
  }
  33.94% {
    background-position: -28vh -81vh;
  }
  34.86% {
    background-position: -56vh -81vh;
  }
  35.78% {
    background-position: -84vh -81vh;
  }
  36.70% {
    background-position: 0vh -90vh;
  }
  37.61% {
    background-position: -28vh -90vh;
  }
  38.53% {
    background-position: -56vh -90vh;
  }
  39.45% {
    background-position: -84vh -90vh;
  }
  40.37% {
    background-position: 0vh -99vh;
  }
  41.28% {
    background-position: -28vh -99vh;
  }
  42.20% {
    background-position: -56vh -99vh;
  }
  43.12% {
    background-position: -84vh -99vh;
  }
  44.04% {
    background-position: -112vh 0vh;
  }
  44.95% {
    background-position: -112vh -9vh;
  }
  45.87% {
    background-position: -112vh -18vh;
  }
  46.79% {
    background-position: -112vh -27vh;
  }
  47.71% {
    background-position: -112vh -36vh;
  }
  48.62% {
    background-position: -112vh -45vh;
  }
  49.54% {
    background-position: -112vh -54vh;
  }
  50.46% {
    background-position: -112vh -63vh;
  }
  51.38% {
    background-position: -112vh -72vh;
  }
  52.29% {
    background-position: -112vh -81vh;
  }
  53.21% {
    background-position: -112vh -90vh;
  }
  54.13% {
    background-position: -112vh -99vh;
  }
  55.05% {
    background-position: 0vh -108vh;
  }
  55.96% {
    background-position: -28vh -108vh;
  }
  56.88% {
    background-position: -56vh -108vh;
  }
  57.80% {
    background-position: -84vh -108vh;
  }
  58.72% {
    background-position: -112vh -108vh;
  }
  59.63% {
    background-position: 0vh -117vh;
  }
  60.55% {
    background-position: -28vh -117vh;
  }
  61.47% {
    background-position: -56vh -117vh;
  }
  62.39% {
    background-position: -84vh -117vh;
  }
  63.30% {
    background-position: -112vh -117vh;
  }
  64.22% {
    background-position: 0vh -126vh;
  }
  65.14% {
    background-position: -28vh -126vh;
  }
  66.06% {
    background-position: -56vh -126vh;
  }
  66.97% {
    background-position: -84vh -126vh;
  }
  67.89% {
    background-position: -112vh -126vh;
  }
  68.81% {
    background-position: -140vh 0vh;
  }
  69.72% {
    background-position: -140vh -9vh;
  }
  70.64% {
    background-position: -140vh -18vh;
  }
  71.56% {
    background-position: -140vh -27vh;
  }
  72.48% {
    background-position: -140vh -36vh;
  }
  73.39% {
    background-position: -140vh -45vh;
  }
  74.31% {
    background-position: -140vh -54vh;
  }
  75.23% {
    background-position: -140vh -63vh;
  }
  76.15% {
    background-position: -140vh -72vh;
  }
  77.06% {
    background-position: -140vh -81vh;
  }
  77.98% {
    background-position: -140vh -90vh;
  }
  78.90% {
    background-position: -140vh -99vh;
  }
  79.82% {
    background-position: -140vh -108vh;
  }
  80.73% {
    background-position: -140vh -117vh;
  }
  81.65% {
    background-position: -140vh -126vh;
  }
  82.57% {
    background-position: 0vh -135vh;
  }
  83.49% {
    background-position: -28vh -135vh;
  }
  84.40% {
    background-position: -56vh -135vh;
  }
  85.32% {
    background-position: -84vh -135vh;
  }
  86.24% {
    background-position: -112vh -135vh;
  }
  87.16% {
    background-position: -140vh -135vh;
  }
  88.07% {
    background-position: 0vh -144vh;
  }
  88.99% {
    background-position: -28vh -144vh;
  }
  89.91% {
    background-position: -56vh -144vh;
  }
  90.83% {
    background-position: -84vh -144vh;
  }
  91.74% {
    background-position: -112vh -144vh;
  }
  92.66% {
    background-position: -140vh -144vh;
  }
  93.58% {
    background-position: 0vh -153vh;
  }
  94.50% {
    background-position: -28vh -153vh;
  }
  95.41% {
    background-position: -56vh -153vh;
  }
  96.33% {
    background-position: -84vh -153vh;
  }
  97.25% {
    background-position: -112vh -153vh;
  }
  98.17% {
    background-position: -140vh -153vh;
  }
  99.08%, 100% {
    background-position: -168vh 0vh;
  }
}
@-webkit-keyframes hdjoinbtn2 {
  0% {
    width: 42.6vh;
    height: 12.2vh;
    background-image: url("../img/longbtn.png");
    background-size: 298.2vh 244vh;
    background-position: 0vh -12.2vh;
  }
  0.81% {
    background-position: 0vh -12.2vh;
  }
  1.63% {
    background-position: 0vh -24.4vh;
  }
  2.44% {
    background-position: -42.6vh 0vh;
  }
  3.25% {
    background-position: -42.6vh -12.2vh;
  }
  4.07% {
    background-position: -42.6vh -24.4vh;
  }
  4.88% {
    background-position: 0vh -36.6vh;
  }
  5.69% {
    background-position: -42.6vh -36.6vh;
  }
  6.50% {
    background-position: 0vh -48.8vh;
  }
  7.32% {
    background-position: -42.6vh -48.8vh;
  }
  8.13% {
    background-position: 0vh -61vh;
  }
  8.94% {
    background-position: -42.6vh -61vh;
  }
  9.76% {
    background-position: -85.2vh 0vh;
  }
  10.57% {
    background-position: -85.2vh -12.2vh;
  }
  11.38% {
    background-position: -85.2vh -24.4vh;
  }
  12.20% {
    background-position: -85.2vh -36.6vh;
  }
  13.01% {
    background-position: -85.2vh -48.8vh;
  }
  13.82% {
    background-position: -85.2vh -61vh;
  }
  14.63% {
    background-position: 0vh -73.2vh;
  }
  15.45% {
    background-position: -42.6vh -73.2vh;
  }
  16.26% {
    background-position: -85.2vh -73.2vh;
  }
  17.07% {
    background-position: 0vh -85.4vh;
  }
  17.89% {
    background-position: -42.6vh -85.4vh;
  }
  18.70% {
    background-position: -85.2vh -85.4vh;
  }
  19.51% {
    background-position: 0vh -97.6vh;
  }
  20.33% {
    background-position: -42.6vh -97.6vh;
  }
  21.14% {
    background-position: -85.2vh -97.6vh;
  }
  21.95% {
    background-position: 0vh -109.8vh;
  }
  22.76% {
    background-position: -42.6vh -109.8vh;
  }
  23.58% {
    background-position: -85.2vh -109.8vh;
  }
  24.39% {
    background-position: -127.8vh 0vh;
  }
  25.20% {
    background-position: -127.8vh -12.2vh;
  }
  26.02% {
    background-position: -127.8vh -24.4vh;
  }
  26.83% {
    background-position: -127.8vh -36.6vh;
  }
  27.64% {
    background-position: -127.8vh -48.8vh;
  }
  28.46% {
    background-position: -127.8vh -61vh;
  }
  29.27% {
    background-position: -127.8vh -73.2vh;
  }
  30.08% {
    background-position: -127.8vh -85.4vh;
  }
  30.89% {
    background-position: -127.8vh -97.6vh;
  }
  31.71% {
    background-position: -127.8vh -109.8vh;
  }
  32.52% {
    background-position: 0vh -122vh;
  }
  33.33% {
    background-position: -42.6vh -122vh;
  }
  34.15% {
    background-position: -85.2vh -122vh;
  }
  34.96% {
    background-position: -127.8vh -122vh;
  }
  35.77% {
    background-position: 0vh -134.2vh;
  }
  36.59% {
    background-position: -42.6vh -134.2vh;
  }
  37.40% {
    background-position: -85.2vh -134.2vh;
  }
  38.21% {
    background-position: -127.8vh -134.2vh;
  }
  39.02% {
    background-position: 0vh -146.4vh;
  }
  39.84% {
    background-position: -42.6vh -146.4vh;
  }
  40.65% {
    background-position: -85.2vh -146.4vh;
  }
  41.46% {
    background-position: -127.8vh -146.4vh;
  }
  42.28% {
    background-position: -170.4vh 0vh;
  }
  43.09% {
    background-position: -170.4vh -12.2vh;
  }
  43.90% {
    background-position: -170.4vh -24.4vh;
  }
  44.72% {
    background-position: -170.4vh -36.6vh;
  }
  45.53% {
    background-position: -170.4vh -48.8vh;
  }
  46.34% {
    background-position: -170.4vh -61vh;
  }
  47.15% {
    background-position: -170.4vh -73.2vh;
  }
  47.97% {
    background-position: -170.4vh -85.4vh;
  }
  48.78% {
    background-position: -170.4vh -97.6vh;
  }
  49.59% {
    background-position: -170.4vh -109.8vh;
  }
  50.41% {
    background-position: -170.4vh -122vh;
  }
  51.22% {
    background-position: -170.4vh -134.2vh;
  }
  52.03% {
    background-position: -170.4vh -146.4vh;
  }
  52.85% {
    background-position: 0vh -158.6vh;
  }
  53.66% {
    background-position: -42.6vh -158.6vh;
  }
  54.47% {
    background-position: -85.2vh -158.6vh;
  }
  55.28% {
    background-position: -127.8vh -158.6vh;
  }
  56.10% {
    background-position: -170.4vh -158.6vh;
  }
  56.91% {
    background-position: 0vh -170.8vh;
  }
  57.72% {
    background-position: -42.6vh -170.8vh;
  }
  58.54% {
    background-position: -85.2vh -170.8vh;
  }
  59.35% {
    background-position: -127.8vh -170.8vh;
  }
  60.16% {
    background-position: -170.4vh -170.8vh;
  }
  60.98% {
    background-position: 0vh -183vh;
  }
  61.79% {
    background-position: -42.6vh -183vh;
  }
  62.60% {
    background-position: -85.2vh -183vh;
  }
  63.41% {
    background-position: -127.8vh -183vh;
  }
  64.23% {
    background-position: -170.4vh -183vh;
  }
  65.04% {
    background-position: 0vh -195.2vh;
  }
  65.85% {
    background-position: -42.6vh -195.2vh;
  }
  66.67% {
    background-position: -85.2vh -195.2vh;
  }
  67.48% {
    background-position: -127.8vh -195.2vh;
  }
  68.29% {
    background-position: -170.4vh -195.2vh;
  }
  69.11% {
    background-position: -213vh 0vh;
  }
  69.92% {
    background-position: -213vh -12.2vh;
  }
  70.73% {
    background-position: -213vh -24.4vh;
  }
  71.54% {
    background-position: -213vh -36.6vh;
  }
  72.36% {
    background-position: -213vh -48.8vh;
  }
  73.17% {
    background-position: -213vh -61vh;
  }
  73.98% {
    background-position: -213vh -73.2vh;
  }
  74.80% {
    background-position: -213vh -85.4vh;
  }
  75.61% {
    background-position: -213vh -97.6vh;
  }
  76.42% {
    background-position: -213vh -109.8vh;
  }
  77.24% {
    background-position: -213vh -122vh;
  }
  78.05% {
    background-position: -213vh -134.2vh;
  }
  78.86% {
    background-position: -213vh -146.4vh;
  }
  79.67% {
    background-position: -213vh -158.6vh;
  }
  80.49% {
    background-position: -213vh -170.8vh;
  }
  81.30% {
    background-position: -213vh -183vh;
  }
  82.11% {
    background-position: -213vh -195.2vh;
  }
  82.93% {
    background-position: 0vh -207.4vh;
  }
  83.74% {
    background-position: -42.6vh -207.4vh;
  }
  84.55% {
    background-position: -85.2vh -207.4vh;
  }
  85.37% {
    background-position: -127.8vh -207.4vh;
  }
  86.18% {
    background-position: -170.4vh -207.4vh;
  }
  86.99% {
    background-position: -213vh -207.4vh;
  }
  87.80% {
    background-position: 0vh -219.6vh;
  }
  88.62% {
    background-position: -42.6vh -219.6vh;
  }
  89.43% {
    background-position: -85.2vh -219.6vh;
  }
  90.24% {
    background-position: -127.8vh -219.6vh;
  }
  91.06% {
    background-position: -170.4vh -219.6vh;
  }
  91.87% {
    background-position: -213vh -219.6vh;
  }
  92.68% {
    background-position: 0vh -231.8vh;
  }
  93.50% {
    background-position: -42.6vh -231.8vh;
  }
  94.31% {
    background-position: -85.2vh -231.8vh;
  }
  95.12% {
    background-position: -127.8vh -231.8vh;
  }
  95.93% {
    background-position: -170.4vh -231.8vh;
  }
  96.75% {
    background-position: -213vh -231.8vh;
  }
  97.56% {
    background-position: -255.6vh 0vh;
  }
  98.37% {
    background-position: -255.6vh -12.2vh;
  }
  99.19%, 100% {
    background-position: -255.6vh -24.4vh;
  }
}
@keyframes hdjoinbtn2 {
  0% {
    width: 42.6vh;
    height: 12.2vh;
    background-image: url("../img/longbtn.png");
    background-size: 298.2vh 244vh;
    background-position: 0vh -12.2vh;
  }
  0.81% {
    background-position: 0vh -12.2vh;
  }
  1.63% {
    background-position: 0vh -24.4vh;
  }
  2.44% {
    background-position: -42.6vh 0vh;
  }
  3.25% {
    background-position: -42.6vh -12.2vh;
  }
  4.07% {
    background-position: -42.6vh -24.4vh;
  }
  4.88% {
    background-position: 0vh -36.6vh;
  }
  5.69% {
    background-position: -42.6vh -36.6vh;
  }
  6.50% {
    background-position: 0vh -48.8vh;
  }
  7.32% {
    background-position: -42.6vh -48.8vh;
  }
  8.13% {
    background-position: 0vh -61vh;
  }
  8.94% {
    background-position: -42.6vh -61vh;
  }
  9.76% {
    background-position: -85.2vh 0vh;
  }
  10.57% {
    background-position: -85.2vh -12.2vh;
  }
  11.38% {
    background-position: -85.2vh -24.4vh;
  }
  12.20% {
    background-position: -85.2vh -36.6vh;
  }
  13.01% {
    background-position: -85.2vh -48.8vh;
  }
  13.82% {
    background-position: -85.2vh -61vh;
  }
  14.63% {
    background-position: 0vh -73.2vh;
  }
  15.45% {
    background-position: -42.6vh -73.2vh;
  }
  16.26% {
    background-position: -85.2vh -73.2vh;
  }
  17.07% {
    background-position: 0vh -85.4vh;
  }
  17.89% {
    background-position: -42.6vh -85.4vh;
  }
  18.70% {
    background-position: -85.2vh -85.4vh;
  }
  19.51% {
    background-position: 0vh -97.6vh;
  }
  20.33% {
    background-position: -42.6vh -97.6vh;
  }
  21.14% {
    background-position: -85.2vh -97.6vh;
  }
  21.95% {
    background-position: 0vh -109.8vh;
  }
  22.76% {
    background-position: -42.6vh -109.8vh;
  }
  23.58% {
    background-position: -85.2vh -109.8vh;
  }
  24.39% {
    background-position: -127.8vh 0vh;
  }
  25.20% {
    background-position: -127.8vh -12.2vh;
  }
  26.02% {
    background-position: -127.8vh -24.4vh;
  }
  26.83% {
    background-position: -127.8vh -36.6vh;
  }
  27.64% {
    background-position: -127.8vh -48.8vh;
  }
  28.46% {
    background-position: -127.8vh -61vh;
  }
  29.27% {
    background-position: -127.8vh -73.2vh;
  }
  30.08% {
    background-position: -127.8vh -85.4vh;
  }
  30.89% {
    background-position: -127.8vh -97.6vh;
  }
  31.71% {
    background-position: -127.8vh -109.8vh;
  }
  32.52% {
    background-position: 0vh -122vh;
  }
  33.33% {
    background-position: -42.6vh -122vh;
  }
  34.15% {
    background-position: -85.2vh -122vh;
  }
  34.96% {
    background-position: -127.8vh -122vh;
  }
  35.77% {
    background-position: 0vh -134.2vh;
  }
  36.59% {
    background-position: -42.6vh -134.2vh;
  }
  37.40% {
    background-position: -85.2vh -134.2vh;
  }
  38.21% {
    background-position: -127.8vh -134.2vh;
  }
  39.02% {
    background-position: 0vh -146.4vh;
  }
  39.84% {
    background-position: -42.6vh -146.4vh;
  }
  40.65% {
    background-position: -85.2vh -146.4vh;
  }
  41.46% {
    background-position: -127.8vh -146.4vh;
  }
  42.28% {
    background-position: -170.4vh 0vh;
  }
  43.09% {
    background-position: -170.4vh -12.2vh;
  }
  43.90% {
    background-position: -170.4vh -24.4vh;
  }
  44.72% {
    background-position: -170.4vh -36.6vh;
  }
  45.53% {
    background-position: -170.4vh -48.8vh;
  }
  46.34% {
    background-position: -170.4vh -61vh;
  }
  47.15% {
    background-position: -170.4vh -73.2vh;
  }
  47.97% {
    background-position: -170.4vh -85.4vh;
  }
  48.78% {
    background-position: -170.4vh -97.6vh;
  }
  49.59% {
    background-position: -170.4vh -109.8vh;
  }
  50.41% {
    background-position: -170.4vh -122vh;
  }
  51.22% {
    background-position: -170.4vh -134.2vh;
  }
  52.03% {
    background-position: -170.4vh -146.4vh;
  }
  52.85% {
    background-position: 0vh -158.6vh;
  }
  53.66% {
    background-position: -42.6vh -158.6vh;
  }
  54.47% {
    background-position: -85.2vh -158.6vh;
  }
  55.28% {
    background-position: -127.8vh -158.6vh;
  }
  56.10% {
    background-position: -170.4vh -158.6vh;
  }
  56.91% {
    background-position: 0vh -170.8vh;
  }
  57.72% {
    background-position: -42.6vh -170.8vh;
  }
  58.54% {
    background-position: -85.2vh -170.8vh;
  }
  59.35% {
    background-position: -127.8vh -170.8vh;
  }
  60.16% {
    background-position: -170.4vh -170.8vh;
  }
  60.98% {
    background-position: 0vh -183vh;
  }
  61.79% {
    background-position: -42.6vh -183vh;
  }
  62.60% {
    background-position: -85.2vh -183vh;
  }
  63.41% {
    background-position: -127.8vh -183vh;
  }
  64.23% {
    background-position: -170.4vh -183vh;
  }
  65.04% {
    background-position: 0vh -195.2vh;
  }
  65.85% {
    background-position: -42.6vh -195.2vh;
  }
  66.67% {
    background-position: -85.2vh -195.2vh;
  }
  67.48% {
    background-position: -127.8vh -195.2vh;
  }
  68.29% {
    background-position: -170.4vh -195.2vh;
  }
  69.11% {
    background-position: -213vh 0vh;
  }
  69.92% {
    background-position: -213vh -12.2vh;
  }
  70.73% {
    background-position: -213vh -24.4vh;
  }
  71.54% {
    background-position: -213vh -36.6vh;
  }
  72.36% {
    background-position: -213vh -48.8vh;
  }
  73.17% {
    background-position: -213vh -61vh;
  }
  73.98% {
    background-position: -213vh -73.2vh;
  }
  74.80% {
    background-position: -213vh -85.4vh;
  }
  75.61% {
    background-position: -213vh -97.6vh;
  }
  76.42% {
    background-position: -213vh -109.8vh;
  }
  77.24% {
    background-position: -213vh -122vh;
  }
  78.05% {
    background-position: -213vh -134.2vh;
  }
  78.86% {
    background-position: -213vh -146.4vh;
  }
  79.67% {
    background-position: -213vh -158.6vh;
  }
  80.49% {
    background-position: -213vh -170.8vh;
  }
  81.30% {
    background-position: -213vh -183vh;
  }
  82.11% {
    background-position: -213vh -195.2vh;
  }
  82.93% {
    background-position: 0vh -207.4vh;
  }
  83.74% {
    background-position: -42.6vh -207.4vh;
  }
  84.55% {
    background-position: -85.2vh -207.4vh;
  }
  85.37% {
    background-position: -127.8vh -207.4vh;
  }
  86.18% {
    background-position: -170.4vh -207.4vh;
  }
  86.99% {
    background-position: -213vh -207.4vh;
  }
  87.80% {
    background-position: 0vh -219.6vh;
  }
  88.62% {
    background-position: -42.6vh -219.6vh;
  }
  89.43% {
    background-position: -85.2vh -219.6vh;
  }
  90.24% {
    background-position: -127.8vh -219.6vh;
  }
  91.06% {
    background-position: -170.4vh -219.6vh;
  }
  91.87% {
    background-position: -213vh -219.6vh;
  }
  92.68% {
    background-position: 0vh -231.8vh;
  }
  93.50% {
    background-position: -42.6vh -231.8vh;
  }
  94.31% {
    background-position: -85.2vh -231.8vh;
  }
  95.12% {
    background-position: -127.8vh -231.8vh;
  }
  95.93% {
    background-position: -170.4vh -231.8vh;
  }
  96.75% {
    background-position: -213vh -231.8vh;
  }
  97.56% {
    background-position: -255.6vh 0vh;
  }
  98.37% {
    background-position: -255.6vh -12.2vh;
  }
  99.19%, 100% {
    background-position: -255.6vh -24.4vh;
  }
}
.lang_en .squadbtn {
  display: none !important;
}

.float_bot {
  width: calc(924 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(132 / var(--screen-width) * var(--screen-maxwidth));
  position: fixed;
  left: 50%;
  bottom: calc(70 / var(--screen-width) * var(--screen-maxwidth));
  margin-left: calc(-462 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 100;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.float_bot .isreglster, .float_bot .notreglster {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.float_bot:before {
  content: "";
  background: url(../img/float_bot.png) no-repeat center top;
  background-size: 100% auto;
  width: calc(1028 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(210 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: calc(-54 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(-39 / var(--screen-width) * var(--screen-maxwidth));
  pointer-events: none;
  z-index: 0;
}
.lang_my .float_bot:before, .lang_es .float_bot:before {
  width: calc(1078 / var(--screen-width) * var(--screen-maxwidth));
  background-size: 100% calc(240 / var(--screen-width) * var(--screen-maxwidth));
  left: calc(-74 / var(--screen-width) * var(--screen-maxwidth));
}

.float_bot_yy {
  background: url(../img/float_bot_yy.png) no-repeat center center/100%;
  width: calc(205 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(193 / var(--screen-width) * var(--screen-maxwidth));
  margin-left: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  margin-top: calc(-4 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
  z-index: 20;
}
.float_bot_yy2 {
  background: url(../img/float_bot_yy2.png) no-repeat center center/100%;
}

.float_bot_qrcode {
  background: url(../img/float_bot_qrcode.png) no-repeat center center/100%;
  width: calc(111 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(111 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
  z-index: 20;
}
.lang_en .float_bot_qrcode, .lang_cn .float_bot_qrcode {
  background-image: url(../img/float_bot_qrcode_apk.png);
}

.float_bot_qrcode canvas, .float_bot_qrcode img {
  width: calc(88 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(88 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.float_close {
  display: block;
  width: calc(35 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(35 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/float_bot_close.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  margin-top: calc(-17 / var(--screen-width) * var(--screen-maxwidth));
  right: calc(32 / var(--screen-width) * var(--screen-maxwidth));
  text-indent: -9999px;
  z-index: 30;
}

.float_slogan {
  display: block;
  width: calc(480 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(88 / var(--screen-width) * var(--screen-maxwidth));
  text-align: center;
  color: #8d5405;
  font-size: calc(36 / var(--screen-width) * var(--screen-maxwidth));
  margin-left: calc(30 / var(--screen-width) * var(--screen-maxwidth));
  line-height: 1.25;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  z-index: 20;
}
.float_slogan2 {
  width: calc(420 / var(--screen-width) * var(--screen-maxwidth));
}
.lang_my .float_slogan2 {
  font-size: calc(20 / var(--screen-width) * var(--screen-maxwidth));
  line-height: 1.7;
}

.float_bot_btn {
  display: block;
  width: calc(217 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(48 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/float_bot_btn.png) no-repeat;
  background-size: 100% 100%;
  margin-left: calc(10 / var(--screen-width) * var(--screen-maxwidth));
  font-size: calc(14 / var(--screen-width) * var(--screen-maxwidth));
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lang_es .float_bot_btn {
  font-size: calc(18 / var(--screen-width) * var(--screen-maxwidth));
}

.lang_ar .float_bot {
  direction: rtl;
}
.lang_ar .float_bot_yy {
  margin-left: 0;
}
.lang_ar .float_slogan {
  width: calc(450 / var(--screen-width) * var(--screen-maxwidth));
  margin-left: 0;
  margin-right: calc(32 / var(--screen-width) * var(--screen-maxwidth));
}
.lang_ar .float_close {
  left: calc(32 / var(--screen-width) * var(--screen-maxwidth));
  right: auto;
}

.float_camp {
  display: none;
}

@media screen and (max-width: 900px) {
  .float_bot {
    display: none !important;
  }
  .float_camp {
    display: block;
    width: calc(228 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(104 / var(--screen-width) * var(--screen-maxwidth));
    background: url(../img/flot_btn.png) no-repeat;
    background-size: 100% 100%;
    position: fixed;
    right: 0;
    bottom: calc(100 / var(--screen-width) * var(--screen-maxwidth));
    z-index: 200;
    box-sizing: border-box;
    padding: calc(50 / var(--screen-width) * var(--screen-maxwidth)) 0 0 calc(66 / var(--screen-width) * var(--screen-maxwidth));
  }
  .float_camp span {
    display: block;
    width: 200%;
    font-size: calc(44 / var(--screen-width) * var(--screen-maxwidth));
    line-height: 1.2;
    transform: scale(0.5);
    transform-origin: 0 0;
    color: #444444;
  }
  .lang_my .float_camp {
    height: calc(110 / var(--screen-width) * var(--screen-maxwidth));
    padding: calc(44 / var(--screen-width) * var(--screen-maxwidth)) 0 0 calc(66 / var(--screen-width) * var(--screen-maxwidth));
  }
  .lang_my .float_camp span {
    font-size: calc(30 / var(--screen-width) * var(--screen-maxwidth));
    line-height: 1.6;
  }
  .lang_id .float_camp, .lang_ms .float_camp {
    padding: calc(46 / var(--screen-width) * var(--screen-maxwidth)) 0 0 calc(66 / var(--screen-width) * var(--screen-maxwidth));
  }
  .lang_id .float_camp span, .lang_ms .float_camp span {
    font-size: calc(34 / var(--screen-width) * var(--screen-maxwidth));
    line-height: 1.1;
  }
  .lang_ar .float_camp {
    padding: calc(44 / var(--screen-width) * var(--screen-maxwidth)) calc(60 / var(--screen-width) * var(--screen-maxwidth)) 0 0;
  }
  .lang_ar .float_camp span {
    text-align: right;
  }
  .lang_ru .float_camp span {
    font-size: calc(32 / var(--screen-width) * var(--screen-maxwidth));
  }
  .lang_de .float_camp span {
    white-space: nowrap;
    font-size: calc(34 / var(--screen-width) * var(--screen-maxwidth));
  }
}
.hok_news_rdmore {
  display: none;
}

.pms .hok_news_speshow {
  width: calc(670 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
  margin: calc(40 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
}
.pms .hok_news_speshow .hok_news_list {
  width: 10000%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.pms .hok_news_speshow .hok_news_list .news_img_line {
  background: url(../img/news_mkk.png) no-repeat;
  background-size: 100% 100%;
}
.pms .hok_news_speshow li {
  width: calc(670 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(420 / var(--screen-width) * var(--screen-maxwidth));
  margin: 0;
}
.pms .hok_news_speshow li:before {
  display: none;
}
.pms .hok_news_speshow li a {
  width: 100%;
  height: 100%;
  padding: 0;
  position: relative;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: calc(28 / var(--screen-width) * var(--screen-maxwidth)) calc(20 / var(--screen-width) * var(--screen-maxwidth));
}
.pms .hok_news_speshow li .hok_news_img,
.pms .hok_news_speshow li .news_imgin {
  width: 100%;
  height: 100%;
}
.pms .hok_news_speshow li .hok_news_img img,
.pms .hok_news_speshow li .news_imgin img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.pms .hok_news_speshow li .hok_news_des {
  width: 100%;
  color: #faf2e3;
  font-size: calc(22 / var(--screen-width) * var(--screen-maxwidth));
  line-height: 1.3;
  position: absolute !important;
  left: 0;
  top: calc(358 / var(--screen-width) * var(--screen-maxwidth));
  padding: 0 calc(24 / var(--screen-width) * var(--screen-maxwidth));
  transform: translate(0, 0);
  margin-top: 0;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  box-sizing: border-box;
}
.pms .hok_news_speshow li .hok_news_destime {
  width: 100%;
  color: #faf2e3;
  font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  line-height: 1.3;
  position: absolute !important;
  left: 0;
  top: calc(338 / var(--screen-width) * var(--screen-maxwidth));
  padding: 0 calc(24 / var(--screen-width) * var(--screen-maxwidth));
  transform: translate(0, 0);
  margin-top: 0;
  box-sizing: border-box;
}
.pms.lang_my .hok_news_speshow li .hok_news_des {
  line-height: 1.8;
}
.pms .hok_news_rdmore {
  display: block;
  width: calc(182 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(40 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/read_more2.png) no-repeat;
  background-size: 100% 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: calc(18 / var(--screen-width) * var(--screen-maxwidth));
  color: #fef7db;
  position: relative;
  z-index: 30;
  margin-top: calc(22 / var(--screen-width) * var(--screen-maxwidth));
}
.pms .news_btnbox {
  margin: calc(40 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
}

@media screen and (max-width: 600px) {
  body .hok_head .hd_logo {
    top: 29vh;
  }
  body .hok_head .hok_stbox {
    flex-wrap: wrap;
  }
  body .hok_head .hok_stbox {
    top: 56.3vh;
  }
  body .hok_head .hok_stbox.isreglster a {
    width: 52%;
  }
  body .hok_head .hok_stbox a {
    width: 58%;
    margin-bottom: 2vh;
  }
  body .hok_head .hok_stbox a img {
    margin: 0 auto;
  }
  body.lang_cn *[lang-block=onlycn] {
    display: none !important;
  }
}