@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_new.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);
  }
}
.security_wrap {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
}

.security_in {
  width: 100%;
  position: relative;
  padding-bottom: calc(86 / var(--screen-width) * var(--screen-maxwidth));
}
.security_in:after {
  content: "";
  width: calc(2240 / var(--screen-width) * var(--screen-maxwidth));
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 0;
  transform: translate(-50%, 0);
  background: url(../img/newpage/security_bg.jpg) no-repeat;
  background-size: 100% auto;
}

.devtalk_wrap .security_in:after {
  background: url(../img/newpage/devtalk_bg.jpg) no-repeat;
  background-size: 100% auto;
}

.lang_ar .devtalk_wrap .security_in:after {
  background: url(../img/newpage/devtalk_bg_ar.jpg) no-repeat;
  background-size: 100% auto;
}

.tutorial_box {
  width: 100%;
}

.tutorial_wrap .security_in:after {
  background: url(../img/newpage/tutorial_bg.jpg) no-repeat;
  background-size: 100% auto;
}
.tutorial_wrap .security_head {
  height: calc(1000 / var(--screen-width) * var(--screen-maxwidth));
}
.tutorial_wrap .security_title {
  font-size: calc(150 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(362 / var(--screen-width) * var(--screen-maxwidth));
  left: calc(110 / var(--screen-width) * var(--screen-maxwidth));
  text-align: left;
  filter: drop-shadow(rgba(0, 0, 0, 0.3) 0 0 calc(40 / var(--screen-width) * var(--screen-maxwidth))) drop-shadow(rgba(0, 0, 0, 0.3) 0 0 calc(40 / var(--screen-width) * var(--screen-maxwidth)));
}
.lang_ja .tutorial_wrap .security_title {
  top: calc(316 / var(--screen-width) * var(--screen-maxwidth));
}

.tutorial_wrap .security_sub_title {
  top: calc(506 / var(--screen-width) * var(--screen-maxwidth));
  left: calc(116 / var(--screen-width) * var(--screen-maxwidth));
  font-size: calc(80 / var(--screen-width) * var(--screen-maxwidth));
  text-align: left;
  filter: drop-shadow(rgba(0, 0, 0, 0.3) 0 0 calc(40 / var(--screen-width) * var(--screen-maxwidth))) drop-shadow(rgba(0, 0, 0, 0.3) 0 0 calc(40 / var(--screen-width) * var(--screen-maxwidth)));
}

.security_head {
  height: calc(740 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
  z-index: 10;
}

.security_title {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  top: calc(322 / var(--screen-width) * var(--screen-maxwidth));
  font-size: calc(100 / var(--screen-width) * var(--screen-maxwidth));
  text-transform: uppercase;
  font-family: "HOK-title";
}
.lang_ar .security_title {
  font-family: "AR_Bold";
}

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

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

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

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

.security_title span {
  display: block;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff0c7), to(#ffffff));
  background-image: linear-gradient(#fff0c7, #ffffff);
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.security_sub_title {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  top: calc(438 / var(--screen-width) * var(--screen-maxwidth));
  font-size: calc(40 / var(--screen-width) * var(--screen-maxwidth));
  text-transform: uppercase;
  font-family: "HOK-title";
}
.lang_ar .security_sub_title {
  font-family: "AR_Bold";
}

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

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

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

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

.security_sub_title span {
  display: block;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff0c7), to(#ffffff));
  background-image: linear-gradient(#fff0c7, #ffffff);
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.security_cont {
  width: calc(1200 / var(--screen-width) * var(--screen-maxwidth));
  margin: 0 auto;
  padding-top: calc(126 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
  display: flex;
  flex-wrap: wrap;
  z-index: 10;
}

.devtalk_contin {
  width: 100%;
  margin: calc(60 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  z-index: 10;
}

.security_cont_fm {
  width: calc(601 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(386 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
  padding: calc(3 / var(--screen-width) * var(--screen-maxwidth));
  box-sizing: border-box;
  background: url(../img/newpage/security_cont_fm_empty.png) no-repeat;
  background-size: 100% 100%;
}
.security_cont_fm img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.security_cont_fm a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.security_cont_fm p {
  width: 100%;
  height: calc(60 / var(--screen-width) * var(--screen-maxwidth));
  line-height: calc(60 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  padding: 0 calc(18 / var(--screen-width) * var(--screen-maxwidth));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(24 / var(--screen-width) * var(--screen-maxwidth));
  color: #ffffff;
  font-family: "HOK-title";
}
.lang_ar .security_cont_fm p {
  font-family: "AR_Bold";
}

.lang_tw .security_cont_fm p {
  font-family: "CHT_Bold";
}

.lang_cn .security_cont_fm p {
  font-family: "CHS_Bold";
}

.lang_my .security_cont_fm p {
  font-family: "MM_Bold";
}

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

.security_cont_tab {
  width: calc(580 / var(--screen-width) * var(--screen-maxwidth));
  margin-left: calc(18 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
}

.security_cont_tablist {
  width: auto;
  min-width: calc(560 / var(--screen-width) * var(--screen-maxwidth));
  display: flex;
  font-family: "HOK-title";
}
.lang_ar .security_cont_tablist {
  font-family: "AR_Bold";
}

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

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

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

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

.security_cont_tablist li {
  width: calc(244 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(60 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/newpage/tab_nom.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(20 / var(--screen-width) * var(--screen-maxwidth));
  color: #d8b769;
  text-transform: uppercase;
  cursor: pointer;
  margin-right: calc(10 / var(--screen-width) * var(--screen-maxwidth));
  text-align: center;
  line-height: 1;
}
.security_cont_tablist li.cur {
  background: url(../img/newpage/tab_light.png) no-repeat;
  background-size: 100% 100%;
  color: #ffffff;
}
.security_cont_tablist li p {
  width: 95%;
  margin: 0 auto;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.security_detail_list {
  width: 100%;
  height: calc(304 / var(--screen-width) * var(--screen-maxwidth));
  margin: calc(10 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
  position: relative;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding-right: calc(20 / var(--screen-width) * var(--screen-maxwidth));
}
.security_detail_list::-webkit-scrollbar {
  width: calc(4 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(4 / var(--screen-width) * var(--screen-maxwidth));
  background-color: transparent;
}
.security_detail_list::-webkit-scrollbar-track {
  border-radius: calc(2 / var(--screen-width) * var(--screen-maxwidth));
  background-color: transparent;
}
.security_detail_list::-webkit-scrollbar-thumb {
  border-radius: calc(2 / var(--screen-width) * var(--screen-maxwidth));
  background-color: #c49f5a;
}
.security_detail_list li {
  width: 100%;
  height: calc(62 / var(--screen-width) * var(--screen-maxwidth));
  box-sizing: border-box;
  border-bottom: #f6ead8 solid 1px;
  display: flex;
  position: relative;
  font-family: "HOK-text";
}
.lang_ar .security_detail_list li {
  font-family: "AR";
}

.lang_tw .security_detail_list li {
  font-family: "CHT";
}

.lang_cn .security_detail_list li {
  font-family: "CHS";
}

.lang_my .security_detail_list li {
  font-family: "MM";
}

.lang_ja .security_detail_list li {
  font-family: "NotoSansJP-Regular";
}

.security_detail_list a {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
}

.security_detail_para {
  width: calc(426 / var(--screen-width) * var(--screen-maxwidth));
  font-size: calc(24 / var(--screen-width) * var(--screen-maxwidth));
  color: #242424;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.security_detail_time {
  font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  color: rgba(36, 36, 36, 0.5);
  width: calc(136 / var(--screen-width) * var(--screen-maxwidth));
  text-align: right;
}

.lang_zh .security_detail_para, .lang_tw .security_detail_para, .zh-Hant .security_detail_para {
  font-family: "Microsoft YaHei" !important;
}

.float_kfrk {
  width: calc(80 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(80 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/newpage/kf_icon.png) no-repeat;
  background-size: 100% 100%;
  position: fixed;
  right: calc(40 / var(--screen-width) * var(--screen-maxwidth));
  top: 96px;
  z-index: 50;
  display: none;
}
.float_kfrk p {
  width: calc(136 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: 50%;
  top: calc(86 / var(--screen-width) * var(--screen-maxwidth));
  transform: translate(-50%, 0);
  font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  color: #d4a34e;
  text-align: center;
  text-transform: uppercase;
  font-family: "HOK-text";
}
.lang_ar .float_kfrk p {
  font-family: "AR";
}

.lang_tw .float_kfrk p {
  font-family: "CHT";
}

.lang_cn .float_kfrk p {
  font-family: "CHS";
}

.lang_my .float_kfrk p {
  font-family: "MM";
}

.lang_ja .float_kfrk p {
  font-family: "NotoSansJP-Regular";
}

.tab_scroll_wrap {
  width: 100%;
  overflow: hidden;
  margin: calc(40 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
}
.tab_scroll_wrap .swiper-wrapper {
  width: 10000%;
  display: flex;
}
.tab_scroll_wrap .swiper-slide {
  width: auto;
}
.tab_scroll_wrap2 {
  width: calc(580 / var(--screen-width) * var(--screen-maxwidth));
  margin: 0 auto;
}

.devtalk_tab {
  width: auto;
  min-width: calc(1200 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(68 / var(--screen-width) * var(--screen-maxwidth));
  margin: 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "HOK-title";
}
.lang_ar .devtalk_tab {
  font-family: "AR_Bold";
}

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

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

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

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

.devtalk_tab li {
  width: calc(346 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(68 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/newpage/tab_nom2.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(26 / var(--screen-width) * var(--screen-maxwidth));
  color: #d8b769;
  text-transform: uppercase;
  cursor: pointer;
  margin: 0 calc(8 / var(--screen-width) * var(--screen-maxwidth));
  text-align: center;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
}
.devtalk_tab li p {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 95%;
  margin: 0 auto;
}
.devtalk_tab li.cur {
  color: #ffffff;
  background: url(../img/newpage/tab_light2.png) no-repeat;
  background-size: 100% 100%;
}

.is_empty {
  display: block;
  width: 100%;
  text-align: center;
  height: calc(360 / var(--screen-width) * var(--screen-maxwidth));
  line-height: calc(360 / var(--screen-width) * var(--screen-maxwidth));
  font-size: calc(24 / var(--screen-width) * var(--screen-maxwidth));
  color: #242424;
}

.devtalk_swip {
  width: calc(1210 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(620 / var(--screen-width) * var(--screen-maxwidth));
  overflow: hidden;
  border-bottom: #d7bea0 solid 1px;
}
.devtalk_swip2 {
  height: calc(636 / var(--screen-width) * var(--screen-maxwidth));
  border-bottom: none;
}

.devtalk_tab_list {
  position: relative;
  width: calc(1210 / var(--screen-width) * var(--screen-maxwidth));
  max-height: calc(666 / var(--screen-width) * var(--screen-maxwidth));
  box-sizing: border-box;
  padding-bottom: calc(52 / var(--screen-width) * var(--screen-maxwidth));
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: hidden;
  overflow-y: scroll;
  margin: calc(30 / var(--screen-width) * var(--screen-maxwidth)) 0 0 calc(10 / var(--screen-width) * var(--screen-maxwidth));
}
.devtalk_tab_list2 {
  border-bottom: none;
}
.devtalk_tab_list:after {
  width: 100%;
  height: calc(700 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.devtalk_tab_list::-webkit-scrollbar {
  width: calc(4 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(4 / var(--screen-width) * var(--screen-maxwidth));
  background-color: transparent;
}
.devtalk_tab_list::-webkit-scrollbar-track {
  border-radius: calc(2 / var(--screen-width) * var(--screen-maxwidth));
  background-color: transparent;
}
.devtalk_tab_list::-webkit-scrollbar-thumb {
  border-radius: calc(2 / var(--screen-width) * var(--screen-maxwidth));
  background-color: #c49f5a;
}
.devtalk_tab_list li {
  width: calc(386 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
  margin-right: calc(20 / var(--screen-width) * var(--screen-maxwidth));
  float: left;
  padding-bottom: calc(60 / var(--screen-width) * var(--screen-maxwidth));
}
.devtalk_tab_list li:nth-child(3n) {
  margin-right: 0;
}
.devtalk_tab_list li a {
  display: block;
  width: 100%;
}
.devtalk_tab_list li a:hover .devtalk_img img {
  transform: scale(1.1);
}
.devtalk_tab_list2 {
  border-bottom: none;
}
.devtalk_tab_list2 .devtalk_detail {
  margin: 0 auto 0;
}
.devtalk_tab_list2 .devtalk_detail_time {
  width: 100%;
  text-align: left;
}

.devtalk_img {
  width: calc(386 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(218 / var(--screen-width) * var(--screen-maxwidth));
  box-sizing: border-box;
  border-width: calc(2 / var(--screen-width) * var(--screen-maxwidth));
  border-style: solid;
  border-image: linear-gradient(to bottom, #fbd89b, #cb973b) 4;
  overflow: hidden;
  background: #b7b7b7;
  object-fit: cover;
}
.devtalk_img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s;
}

.devtalk_detail {
  width: 100%;
  display: flex;
  margin: calc(8 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
  position: absolute;
  left: 0;
  bottom: calc(26 / var(--screen-width) * var(--screen-maxwidth));
}

.devtalk_detail_t {
  width: calc(300 / var(--screen-width) * var(--screen-maxwidth));
  font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  color: #8a520a;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "HOK-text";
}
.lang_ar .devtalk_detail_t {
  font-family: "AR";
}

.lang_tw .devtalk_detail_t {
  font-family: "CHT";
}

.lang_cn .devtalk_detail_t {
  font-family: "CHS";
}

.lang_my .devtalk_detail_t {
  font-family: "MM";
}

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

.devtalk_detail_time {
  font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  color: rgba(0, 0, 0, 0.5);
  width: calc(84 / var(--screen-width) * var(--screen-maxwidth));
  text-align: right;
}

.devtalk_detail_title {
  width: 100%;
  font-size: calc(24 / var(--screen-width) * var(--screen-maxwidth));
  line-height: 1.1;
  color: #242424;
  margin: calc(6 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: "HOK-title";
}
.lang_ar .devtalk_detail_title {
  font-family: "AR_Bold";
}

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

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

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

.lang_ja .devtalk_detail_title {
  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_zh .security_cont_tablist, .lang_zh .tutorial_ryname, .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_cn .security_cont_tablist, .lang_cn .tutorial_ryname, .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, .lang_tw .security_cont_tablist, .lang_tw .tutorial_ryname, .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, .zh-Hant .security_cont_tablist, .zh-Hant .tutorial_ryname {
  font-family: "Microsoft YaHei" !important;
  font-weight: bold;
}
.lang_zh .devtalk_dev_info_pnum, .lang_zh .tutorial_rynum, .lang_cn .devtalk_dev_info_pnum, .lang_cn .tutorial_rynum, .lang_tw .devtalk_dev_info_pnum, .lang_tw .tutorial_rynum, .zh-Hant .devtalk_dev_info_pnum, .zh-Hant .tutorial_rynum {
  font-family: "Microsoft YaHei" !important;
}
.lang_zh .devtalk_detail_title, .lang_cn .devtalk_detail_title, .lang_tw .devtalk_detail_title, .zh-Hant .devtalk_detail_title {
  line-height: 1.3;
}

.lang_my .devtalk_detail_title {
  line-height: 1.7;
}

.devtalk_line {
  font-size: calc(32 / var(--screen-width) * var(--screen-maxwidth));
  text-align: center;
  margin: calc(54 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
  display: flex;
  justify-content: center;
  text-transform: uppercase;
  font-family: "HOK-title";
}
.lang_ar .devtalk_line {
  font-family: "AR_Bold";
}

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

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

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

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

.devtalk_line p {
  position: relative;
}
.devtalk_line p:before {
  content: "";
  width: calc(481 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(7 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/newpage/devtalk_line.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: calc(-490 / var(--screen-width) * var(--screen-maxwidth));
  top: 50%;
  transform: translate(0, -50%);
}
.devtalk_line p:after {
  content: "";
  width: calc(481 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(7 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/newpage/devtalk_line.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right: calc(-490 / var(--screen-width) * var(--screen-maxwidth));
  top: 50%;
  transform: translate(0, -50%) scale(-1, 1);
}
.devtalk_line span {
  display: block;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#c2a57e), to(#ad7e2b));
  background-image: linear-gradient(#c2a57e, #ad7e2b);
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.devtalk_dev_box {
  width: calc(624 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(130 / var(--screen-width) * var(--screen-maxwidth));
  margin: calc(24 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
  position: relative;
  display: flex;
  align-items: center;
  border: #d8b769 solid calc(2 / var(--screen-width) * var(--screen-maxwidth));
  box-sizing: border-box;
}

.devtalk_dev_hdimg {
  width: calc(92 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(92 / var(--screen-width) * var(--screen-maxwidth));
  box-sizing: border-box;
  border-radius: 50%;
  border: #eae9ec solid 1px;
  overflow: hidden;
  background: #ffffff;
  position: relative;
  margin-left: calc(18 / var(--screen-width) * var(--screen-maxwidth));
}

.devtalk_dev_hdimg_in {
  width: calc(82 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(82 / var(--screen-width) * var(--screen-maxwidth));
  box-sizing: border-box;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.devtalk_dev_hdimg_in img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.devtalk_dev_info {
  width: calc(338 / var(--screen-width) * var(--screen-maxwidth));
  margin-left: calc(10 / var(--screen-width) * var(--screen-maxwidth));
}

.devtalk_dev_info_name {
  font-size: calc(24 / var(--screen-width) * var(--screen-maxwidth));
  color: #242424;
  line-height: calc(28 / var(--screen-width) * var(--screen-maxwidth));
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "HOK-title";
}
.lang_ar .devtalk_dev_info_name {
  font-family: "AR_Bold";
}

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

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

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

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

.devtalk_dev_info_pnum {
  font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  color: rgba(36, 36, 36, 0.6);
  line-height: calc(20 / var(--screen-width) * var(--screen-maxwidth));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "HOK-text";
}
.lang_ar .devtalk_dev_info_pnum {
  font-family: "AR";
}

.lang_tw .devtalk_dev_info_pnum {
  font-family: "CHT";
}

.lang_cn .devtalk_dev_info_pnum {
  font-family: "CHS";
}

.lang_my .devtalk_dev_info_pnum {
  font-family: "MM";
}

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

.devtalk_subscribe {
  width: calc(140 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(42 / var(--screen-width) * var(--screen-maxwidth));
  background: #c49f5a;
  margin-left: calc(8 / var(--screen-width) * var(--screen-maxwidth));
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  color: #ffffff;
  text-transform: uppercase;
  font-family: "HOK-text";
}
.lang_ar .devtalk_subscribe {
  font-family: "AR";
}

.lang_tw .devtalk_subscribe {
  font-family: "CHT";
}

.lang_cn .devtalk_subscribe {
  font-family: "CHS";
}

.lang_my .devtalk_subscribe {
  font-family: "MM";
}

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

.devtalk_subscribe.gray {
  filter: grayscale(1);
}

.tutorial_btnbox {
  position: absolute;
  left: calc(110 / var(--screen-width) * var(--screen-maxwidth));
  top: calc(614 / var(--screen-width) * var(--screen-maxwidth));
  display: flex;
  font-family: "HOK-title";
}
.lang_ar .tutorial_btnbox {
  font-family: "AR_Bold";
}

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

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

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

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

.tutorial_btnbox a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(258 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(58 / var(--screen-width) * var(--screen-maxwidth));
  font-size: calc(20 / var(--screen-width) * var(--screen-maxwidth));
  color: #fefaea;
  font-size: calc(20 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
  margin-right: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  text-transform: uppercase;
}
.tutorial_btnbox a span {
  display: flex;
  width: 80%;
  justify-content: center;
  position: relative;
  text-align: center;
  z-index: 20;
  filter: drop-shadow(#af7b2f calc(1 / var(--screen-width) * var(--screen-maxwidth)) 0 calc(2 / var(--screen-width) * var(--screen-maxwidth)));
}
.tutorial_btnbox a:before {
  content: "";
  width: calc(322 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(130 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/newpage/tutorial_btn.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.lang_pt .tutorial_btnbox a, .lang_ru .tutorial_btnbox a {
  font-size: calc(18 / var(--screen-width) * var(--screen-maxwidth));
}

.lang_my .tutorial_btnbox a {
  font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
}
.lang_my .tutorial_btnbox a span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lang_tr .tutorial_btnbox a {
  text-transform: unset;
}

.tutorial_detail_hot {
  width: calc(214 / var(--screen-width) * var(--screen-maxwidth));
  text-align: right;
  font-size: calc(18 / var(--screen-width) * var(--screen-maxwidth));
  color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: end;
}
.tutorial_detail_hot:before {
  content: "";
  width: calc(20 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(24 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/newpage/hot_icon.png) no-repeat;
  background-size: 100% 100%;
  margin-right: calc(6 / var(--screen-width) * var(--screen-maxwidth));
}

.tutorial_title {
  display: block;
  width: 100%;
  text-align: center;
  font-size: calc(60 / var(--screen-width) * var(--screen-maxwidth));
  color: #75521c;
  text-transform: uppercase;
  font-family: "HOK-title";
}
.lang_ar .tutorial_title {
  font-family: "AR_Bold";
}

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

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

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

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

.tutorial_title span {
  display: block;
  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;
}
.tutorial_title: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/newpage/tutorial_line.png) no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
}
.tutorial_title2 {
  margin: calc(46 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
}

.tutorial_tab {
  margin: calc(40 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
}

.tutorial_tab_box {
  border-bottom: #d7bea0 solid 1px;
}

.tutorial_rybox_wrap {
  width: calc(1200 / var(--screen-width) * var(--screen-maxwidth));
  margin: calc(36 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
  position: relative;
}

.tutorial_rybox {
  width: calc(1134 / var(--screen-width) * var(--screen-maxwidth));
  overflow: hidden;
  margin: 0 auto 0;
}
.tutorial_rybox .swiper-wrapper {
  width: 10000%;
  display: flex;
}
.tutorial_rybox ul {
  width: 100%;
  min-width: calc(1134 / var(--screen-width) * var(--screen-maxwidth));
  display: flex;
  justify-content: center;
}
.tutorial_rybox li {
  width: calc(189 / var(--screen-width) * var(--screen-maxwidth));
}
.tutorial_rybox2 ul {
  width: 100%;
  display: flex;
  justify-content: center;
}

.tutorial_ryimg {
  width: calc(120 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(120 / var(--screen-width) * var(--screen-maxwidth));
  border: #d8b769 solid 1px;
  border-radius: 50%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 1px;
}

.tutorial_ryimg_in {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.tutorial_ryimg_in img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.tutorial_ryname {
  font-size: calc(20 / var(--screen-width) * var(--screen-maxwidth));
  color: #242424;
  text-align: center;
  text-transform: uppercase;
  margin: calc(8 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: calc(34 / var(--screen-width) * var(--screen-maxwidth));
  line-height: calc(34 / var(--screen-width) * var(--screen-maxwidth));
  font-family: "HOK-title";
}
.lang_ar .tutorial_ryname {
  font-family: "AR_Bold";
}

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

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

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

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

.tutorial_rynum {
  font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  color: rgba(36, 36, 36, 0.6);
  text-align: center;
  margin: 0 auto 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: calc(24 / var(--screen-width) * var(--screen-maxwidth));
  line-height: calc(24 / var(--screen-width) * var(--screen-maxwidth));
  font-family: "HOK-text";
}
.lang_ar .tutorial_rynum {
  font-family: "AR";
}

.lang_tw .tutorial_rynum {
  font-family: "CHT";
}

.lang_cn .tutorial_rynum {
  font-family: "CHS";
}

.lang_my .tutorial_rynum {
  font-family: "MM";
}

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

.tutorial_rysubscribe {
  display: block;
  width: calc(140 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(38 / var(--screen-width) * var(--screen-maxwidth));
  display: flex;
  justify-content: center;
  align-items: center;
  background: #c49f5a;
  margin: calc(12 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
  font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  color: #ffffff;
  text-transform: uppercase;
  font-family: "HOK-title";
}
.lang_ar .tutorial_rysubscribe {
  font-family: "AR_Bold";
}

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

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

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

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

.tutorial_rysubscribe.gray {
  filter: none;
  background: #b7b7b7;
}

.tutorial_prev, .tutorial_next {
  width: calc(24 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(58 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/newpage/tutorial_prev.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: calc(38 / var(--screen-width) * var(--screen-maxwidth));
}

.tutorial_prev {
  left: 0;
}

.tutorial_next {
  right: 0;
  transform: scale(-1, 1);
}

.tutorial_top_btn {
  display: block;
  width: calc(100 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(100 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/newpage/top_btn.png) no-repeat;
  background-size: 100% 100%;
  position: fixed;
  right: calc(108 / var(--screen-width) * var(--screen-maxwidth));
  bottom: calc(124 / var(--screen-width) * var(--screen-maxwidth));
  z-index: 100;
}

.lang_my .security_title {
  top: calc(277 / var(--screen-width) * var(--screen-maxwidth));
}
.lang_my .security_sub_title {
  top: calc(454 / var(--screen-width) * var(--screen-maxwidth));
}
.lang_my .devtalk_tab li, .lang_my .security_cont_tablist li {
  font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  line-height: 1.7;
}
.lang_my .tutorial_wrap .security_title {
  top: calc(200 / var(--screen-width) * var(--screen-maxwidth));
}
.lang_my .float_kfrk p {
  line-height: 1.5;
}

.lang_br .security_cont_tablist li {
  font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
}

.lang_ru .security_cont_tablist li {
  font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  line-height: 1.1;
}
.lang_ru .tutorial_wrap .security_title {
  font-size: calc(100 / var(--screen-width) * var(--screen-maxwidth));
}
.lang_ru .tutorial_wrap .security_sub_title {
  font-size: calc(54 / var(--screen-width) * var(--screen-maxwidth));
}
.lang_ru .tutorial_wrap .tutorial_btnbox a {
  font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  text-align: center;
}

.lang_id .tutorial_wrap .security_title, .lang_ms .tutorial_wrap .security_title {
  font-size: calc(110 / var(--screen-width) * var(--screen-maxwidth));
  font-weight: bold;
}
.lang_id .tutorial_wrap .security_sub_title, .lang_ms .tutorial_wrap .security_sub_title {
  font-size: calc(54 / var(--screen-width) * var(--screen-maxwidth));
  font-weight: bold;
}

.lang_tw .devtalk_line, .lang_cn .devtalk_line {
  font-weight: bold;
}
.lang_tw .devtalk_tab li, .lang_tw .tutorial_tab li, .lang_cn .devtalk_tab li, .lang_cn .tutorial_tab li {
  font-weight: bold;
}
.lang_tw .tutorial_title, .lang_cn .tutorial_title {
  font-weight: bold;
}
.lang_tw .tutorial_wrap .security_title, .lang_cn .tutorial_wrap .security_title {
  font-size: calc(110 / var(--screen-width) * var(--screen-maxwidth));
  font-weight: bold;
}
.lang_tw .tutorial_wrap .security_sub_title, .lang_cn .tutorial_wrap .security_sub_title {
  font-size: calc(54 / var(--screen-width) * var(--screen-maxwidth));
  font-weight: bold;
}

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

.gray {
  filter: grayscale(1);
}

@media screen and (max-width: 1200px) {
  .security_wrap {
    padding-top: 66px;
  }
}
.pms .float_kfrk {
  display: block;
}

@media screen and (max-width: 900px) {
  .security_in {
    min-height: 100vh;
    background: url(../img/newpage/security_mbg_top.jpg) no-repeat top center, url(../img/newpage/devtalk_mbg_bot.jpg) no-repeat bottom center;
    background-size: 100% auto, 100% auto;
    padding-bottom: calc(24.2666666667vw);
  }
  .security_in:after {
    display: none;
  }
  .devtalk_wrap .security_in {
    background: url(../img/newpage/devtalk_mbg_top.jpg) no-repeat top center, url(../img/newpage/devtalk_mbg_bot.jpg) no-repeat bottom center;
    background-size: 100% auto, 100% auto;
  }
  .lang_ar .devtalk_wrap .security_in {
    background: url(../img/newpage/devtalk_mbg_ar_top.jpg) no-repeat top center, url(../img/newpage/devtalk_mbg_bot.jpg) no-repeat bottom center;
    background-size: 100% auto, 100% auto;
  }
  .tutorial_wrap .security_in {
    background: url(../img/newpage/tutorial_mbg_top.jpg) no-repeat top center, url(../img/newpage/devtalk_mbg_bot.jpg) no-repeat bottom center;
    background-size: 100% auto, 100% auto;
    background: none;
  }
  .tutorial_wrap .security_head {
    height: calc(145.8666666667vw);
    max-height: 100vh;
    background: url(../img/newpage/tutorial_mbg_top_head.jpg) no-repeat center center;
    background-size: 100% calc(146vw);
  }
  .tutorial_wrap .security_title {
    width: 100%;
    left: 0;
    top: unset;
    bottom: calc(34.4vw);
    text-align: center;
    font-size: calc(12.2666666667vw);
  }
  .lang_ja .tutorial_wrap .security_title {
    top: unset;
  }
  .tutorial_wrap .security_sub_title {
    width: 100%;
    left: 0;
    top: unset;
    bottom: calc(26.4vw);
    text-align: center;
    font-size: calc(8.9333333333vw);
  }
  .tutorial_wrap .tutorial_btnbox {
    width: 100%;
    left: 0;
    justify-content: center;
    top: unset;
    bottom: calc(15.6vw);
  }
  .tutorial_wrap .tutorial_btnbox a {
    width: calc(34.4vw);
    height: calc(7.7333333333vw);
    font-size: calc(2.6666666667vw);
  }
  .tutorial_wrap .tutorial_btnbox a:before {
    width: calc(44.2666666667vw);
    height: calc(17.3333333333vw);
  }
  .lang_pt .tutorial_btnbox a {
    font-size: calc(2.4vw);
  }
  .security_head {
    height: calc(60.8vw);
  }
  .security_title {
    font-size: calc(8vw);
    top: calc(22.4vw);
  }
  .security_sub_title {
    font-size: calc(4vw);
    top: calc(31.2vw);
  }
  .security_cont {
    width: calc(86.6666666667vw);
    margin: 0 auto;
  }
  .security_cont_fm {
    width: 100%;
    height: calc(48.8vw);
  }
  .security_cont_fm p {
    height: calc(7.7333333333vw);
    font-size: calc(3.2vw);
    padding: 0 calc(2.6666666667vw);
  }
  .security_cont_tab {
    margin: calc(4vw) auto 0;
    width: 100%;
  }
  .security_cont_tablist {
    width: 100%;
  }
  .security_cont_tablist li {
    width: calc(42vw);
    height: calc(9.0666666667vw);
    font-size: calc(2.6666666667vw);
  }
  .lang_es .security_cont_tablist li {
    font-size: calc(2.4vw);
  }
  .security_detail_list {
    height: calc(42.6666666667vw);
    margin: calc(2.6666666667vw) auto 0;
  }
  .security_detail_list li {
    height: calc(8.8vw);
  }
  .security_detail_para {
    width: calc(58.6666666667vw);
    font-size: calc(3.2vw);
    color: #242424;
  }
  .security_detail_time {
    width: calc(25.3333333333vw);
    font-size: calc(2.6666666667vw);
  }
  .devtalk_tab {
    height: calc(9.0666666667vw);
  }
  .devtalk_tab li {
    width: calc(39.3333333333vw);
    height: calc(9.0666666667vw);
    margin: 0 calc(2.6666666667vw) 0 0;
    font-size: calc(3.2vw);
  }
  .devtalk_tab li:last-child {
    margin-right: 0;
  }
  .devtalk_detail {
    margin: calc(1.8666666667vw) auto 0;
  }
  .devtalk_swip {
    width: calc(86.6666666667vw);
    height: auto;
  }
  .devtalk_tab_list {
    width: calc(86.6666666667vw);
    height: auto;
    max-height: unset;
    margin-left: 0;
  }
  .devtalk_tab_list li {
    margin-right: 0;
    width: 100%;
    height: auto;
    margin-bottom: calc(7.4666666667vw);
  }
  .devtalk_tab_list li:after {
    content: "";
    width: calc(86.6666666667vw);
    height: calc(0.8vw);
    position: absolute;
    left: 0;
    bottom: calc(-0.4vw);
    background: url(../img/newpage/m_line.png) no-repeat;
    background-size: 100% 100%;
  }
  .devtalk_tab_list li:last-child {
    margin-bottom: 0;
  }
  .devtalk_tab_list li:last-child:after {
    display: none;
  }
  .devtalk_tab_list .devtalk_detail_title {
    height: auto;
    line-height: 1.1;
  }
  .devtalk_tab_list2 .devtalk_detail_title {
    margin-top: calc(4vw);
  }
  .devtalk_tab_list2 .devtalk_detail {
    margin: calc(1.3333333333vw) auto 0;
  }
  .lang_my .devtalk_tab_list .devtalk_detail_title {
    line-height: 1.7;
  }
  .devtalk_img {
    width: 100%;
    height: calc(48.8vw);
    border: none;
    background: none;
  }
  .devtalk_img img {
    -webkit-mask-image: url(../img/newpage/m_mask.png);
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
  }
  .devtalk_img:after {
    content: "";
    width: calc(88.2666666667vw);
    height: calc(48.6666666667vw);
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 0;
    background: url(../img/newpage/m_kk.png) no-repeat;
    background-size: 100% 100%;
  }
  .devtalk_detail_t {
    font-size: calc(3.2vw);
    width: calc(69.3333333333vw);
  }
  .devtalk_detail_time {
    width: calc(17.3333333333vw);
    font-size: calc(3.2vw);
  }
  .devtalk_detail_title {
    margin: calc(1.8666666667vw) auto 0;
    font-size: calc(4.5333333333vw);
  }
  .devtalk_line {
    font-size: calc(4.2666666667vw);
    margin: calc(6.1333333333vw) auto 0;
  }
  .devtalk_line p::before, .devtalk_line p::after {
    width: calc(27.4666666667vw);
    height: calc(0.9333333333vw);
    background: url(../img/newpage/devtalk_mline.png) no-repeat;
    background-size: 100% 100%;
  }
  .devtalk_line p::before {
    left: calc(-28.8vw);
  }
  .devtalk_line p::after {
    right: calc(-28.8vw);
  }
  .devtalk_dev_box {
    width: calc(86.6666666667vw);
    height: calc(17.3333333333vw);
    margin: calc(4vw) auto 0;
  }
  .devtalk_dev_hdimg {
    width: calc(12vw);
    height: calc(12vw);
    margin: 0 0 0 calc(2.6666666667vw);
  }
  .devtalk_dev_hdimg_in {
    width: calc(10.6666666667vw);
    height: calc(10.6666666667vw);
  }
  .devtalk_dev_info {
    width: calc(43.2vw);
  }
  .devtalk_dev_info_name {
    font-size: calc(24 / var(--screen-width) * var(--screen-maxwidth));
  }
  .devtalk_dev_info_pnum {
    font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  }
  .devtalk_subscribe {
    width: calc(23.4666666667vw);
    height: calc(6.4vw);
    margin-left: calc(1.3333333333vw);
    font-size: calc(2.6666666667vw);
  }
  .tutorial_title {
    font-size: calc(5.3333333333vw);
  }
  .tutorial_title:after {
    width: calc(86.6666666667vw);
    height: calc(2.1333333333vw);
    background: url(../img/newpage/m_tline.png) no-repeat;
    background-size: 100% 100%;
    margin: calc(2.6666666667vw) auto 0;
  }
  .tutorial_box {
    width: calc(86.6666666667vw);
  }
  .tab_scroll_wrap {
    width: calc(89.3333333333vw);
    margin: calc(5.3333333333vw) 0 0 0;
  }
  .tab_scroll_wrap .devtalk_tab {
    min-width: calc(86.6666666667vw);
  }
  .tutorial_tab {
    height: calc(9.0666666667vw);
    margin: calc(4.5333333333vw) auto 0;
  }
  .tutorial_tab li {
    width: calc(37.8666666667vw);
    height: calc(9.0666666667vw);
    background: url(../img/newpage/tab_mnom2.png) no-repeat;
    background-size: 100% 100%;
    text-align: center;
    color: #c5a05b;
    font-size: calc(3.2vw);
    line-height: calc(3.4666666667vw);
    box-sizing: border-box;
    padding: 0 calc(10 / var(--screen-width) * var(--screen-maxwidth));
  }
  .tutorial_tab li.cur {
    color: #fff;
    background: url(../img/newpage/tab_mlight2.png) no-repeat;
    background-size: 100% 100%;
  }
  .tutorial_top_btn {
    width: calc(13.3333333333vw);
    height: calc(13.3333333333vw);
    right: calc(4vw);
    bottom: calc(8vw);
  }
  .tutorial_rybox_wrap {
    width: calc(86.6666666667vw);
    margin: calc(4vw) auto 0;
  }
  .tutorial_rybox {
    width: calc(77.3333333333vw);
  }
  .tutorial_rybox ul {
    width: calc(77.3333333333vw);
    flex-wrap: wrap;
    min-width: auto;
  }
  .tutorial_rybox ul li {
    width: calc(18.8vw);
    height: calc(34.4vw);
    margin-right: calc(74 / var(--screen-width) * var(--screen-maxwidth));
  }
  .tutorial_rybox ul li:nth-child(3n) {
    margin-right: 0;
  }
  .tutorial_rybox ul li:last-child {
    margin-right: 0;
  }
  .tutorial_prev, .tutorial_next {
    width: calc(3.2vw);
    height: calc(7.7333333333vw);
    top: calc(30.4vw);
    background: url(../img/newpage/tutorial_mprev.png) no-repeat;
    background-size: 100% 100%;
  }
  .tutorial_ryimg {
    width: calc(16.1333333333vw);
    height: calc(16.1333333333vw);
  }
  .tutorial_ryname {
    font-size: calc(2.6666666667vw);
    margin: calc(0.8vw) auto 0;
  }
  .tutorial_rynum {
    font-size: calc(2.1333333333vw);
    color: #242424;
    margin: calc(1.0666666667vw) auto 0;
  }
  .tutorial_rysubscribe {
    width: 100%;
    height: calc(5.0666666667vw);
    font-size: calc(2.1333333333vw);
  }
  .lang_tr .security_title, .lang_ms .security_title, .lang_es .security_title, .lang_fr .security_title {
    top: calc(19.7333333333vw);
    line-height: 1;
  }
  .lang_tr .security_sub_title, .lang_ms .security_sub_title, .lang_es .security_sub_title, .lang_fr .security_sub_title {
    top: calc(37.8666666667vw);
  }
  .lang_tr .devtalk_wrap .security_title, .lang_ms .devtalk_wrap .security_title, .lang_es .devtalk_wrap .security_title, .lang_fr .devtalk_wrap .security_title {
    top: calc(25.0666666667vw);
  }
  .lang_tr .devtalk_wrap .security_sub_title, .lang_ms .devtalk_wrap .security_sub_title, .lang_es .devtalk_wrap .security_sub_title, .lang_fr .devtalk_wrap .security_sub_title {
    top: calc(33.8666666667vw);
  }
  .lang_tr .tutorial_wrap .security_title, .lang_ms .tutorial_wrap .security_title, .lang_es .tutorial_wrap .security_title, .lang_fr .tutorial_wrap .security_title {
    top: unset;
    bottom: calc(34.4vw);
    text-align: center;
    font-size: calc(9.3333333333vw);
  }
  .lang_tr .tutorial_wrap .security_sub_title, .lang_ms .tutorial_wrap .security_sub_title, .lang_es .tutorial_wrap .security_sub_title, .lang_fr .tutorial_wrap .security_sub_title {
    top: unset;
    bottom: calc(26.4vw);
    text-align: center;
    font-size: calc(7.2vw);
  }
  .lang_id .tutorial_wrap .security_title, .lang_ms .tutorial_wrap .security_title, .lang_es .tutorial_wrap .security_title, .lang_de .tutorial_wrap .security_title {
    top: unset;
    bottom: calc(34.4vw);
    text-align: center;
    font-size: calc(8vw);
  }
  .lang_id .tutorial_wrap .security_sub_title, .lang_ms .tutorial_wrap .security_sub_title, .lang_es .tutorial_wrap .security_sub_title, .lang_de .tutorial_wrap .security_sub_title {
    top: unset;
    bottom: calc(29.0666666667vw);
    text-align: center;
    font-size: calc(4.5333333333vw);
  }
  .lang_de .security_title {
    font-size: calc(44 / var(--screen-width) * var(--screen-maxwidth));
    top: calc(27.7333333333vw);
    line-height: 1;
  }
  .lang_de .security_sub_title {
    top: calc(33.8666666667vw);
  }
  .lang_br .security_title {
    top: calc(19.7333333333vw);
    line-height: 1;
  }
  .lang_br .security_sub_title {
    top: calc(37.8666666667vw);
  }
  .lang_br .security_cont_tablist li {
    font-size: calc(2.6666666667vw);
  }
  .lang_br .devtalk_wrap .security_title {
    top: calc(25.0666666667vw);
  }
  .lang_br .devtalk_wrap .security_sub_title {
    top: calc(33.8666666667vw);
  }
  .lang_br .tutorial_wrap .security_title {
    top: unset;
    bottom: calc(34.4vw);
    text-align: center;
    font-size: calc(10.6666666667vw);
  }
  .lang_br .tutorial_wrap .security_sub_title {
    top: unset;
    bottom: calc(26.4vw);
    text-align: center;
    font-size: calc(4.5333333333vw);
  }
  .lang_ru .security_title {
    top: calc(19.7333333333vw);
    line-height: 1;
  }
  .lang_ru .security_sub_title {
    top: calc(37.8666666667vw);
  }
  .lang_ru .security_cont_tablist li {
    font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
    line-height: 1.1;
  }
  .lang_ru .devtalk_wrap .security_title {
    top: calc(25.0666666667vw);
  }
  .lang_ru .devtalk_wrap .security_sub_title {
    top: calc(33.8666666667vw);
  }
  .lang_ru .tutorial_wrap .security_title {
    top: unset;
    bottom: calc(34.4vw);
    text-align: center;
    font-size: calc(8vw);
  }
  .lang_ru .tutorial_wrap .security_sub_title {
    top: unset;
    bottom: calc(26.4vw);
    text-align: center;
    font-size: calc(4.5333333333vw);
  }
  .lang_de .devtalk_tab li {
    font-size: calc(2.4vw);
  }
  .lang_my .security_title {
    top: calc(22.4vw);
  }
  .lang_my .security_sub_title {
    top: calc(36.5333333333vw);
  }
  .lang_my .devtalk_tab li, .lang_my .security_cont_tablist li {
    font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
    line-height: 1.7;
  }
  .lang_my .tutorial_wrap .security_title, .lang_my .tutorial_wrap .security_sub_title {
    top: unset;
  }
  .lang_my .tutorial_wrap .security_title {
    bottom: calc(34vw);
  }
  .lang_my .tutorial_wrap .security_sub_title {
    bottom: calc(27.3333333333vw);
    font-size: calc(5.8666666667vw);
  }
  .lang_my .float_kfrk p {
    line-height: 1.5;
  }
  .lang_my .tutorial_rybox ul li {
    height: calc(38.4vw);
  }
}
@media screen and (max-width: 600px) {
  .security_wrap {
    padding-top: calc(15.4666666667vw);
  }
}