@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";
}

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

@media screen and (min-width: 1921px) {
  :root {
    --screen-maxwidth: 1920px;
  }
}
@media screen and (max-width: 1920px) {
  :root {
    --screen-maxwidth: 100vw;
  }
}
@media screen and (max-width: 1200px) {
  :root {
    --screen-width: 1200;
  }
}
@media screen and (max-width: 600px) {
  :root {
    --screen-width: 750;
  }
}
* {
  -moz-user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  -khtml-user-select: none !important;
  user-select: none !important;
}

input:focus::-webkit-contacts-auto-fill-button {
  opacity: 0;
}

input::-webkit-credentials-auto-fill-button {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.exc_in {
  background: url(../img/exchange/exchange_bg.jpg) no-repeat;
  background-size: 100% auto;
  background-position: 0 calc(712 / var(--screen-width) * var(--screen-maxwidth));
}

.exc_banner {
  height: calc(748 / var(--screen-width) * var(--screen-maxwidth));
  width: 100%;
  position: relative;
  -webkit-mask-image: url(../img/exchange/exchange_banner_mask.png);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}
.exc_banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exc_slogan {
  width: calc(1126 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(184 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: 50%;
  top: calc(310 / var(--screen-width) * var(--screen-maxwidth));
  transform: translate(-50%, 0);
  background-image: url(../img/exchange/slogan_en.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.lang_cn .exc_slogan {
  background-image: url(../img/exchange/slogan_cn.png);
}

.lang_tw .exc_slogan {
  background-image: url(../img/exchange/slogan_tw.png);
}

.lang_br .exc_slogan {
  background-image: url(../img/exchange/slogan_br.png);
}

.lang_tr .exc_slogan {
  background-image: url(../img/exchange/slogan_tr.png);
}

.lang_id .exc_slogan {
  background-image: url(../img/exchange/slogan_id.png);
}

.lang_ms .exc_slogan {
  background-image: url(../img/exchange/slogan_ms.png);
}

.lang_ar .exc_slogan {
  background-image: url(../img/exchange/slogan_ar.png);
}

.lang_ru .exc_slogan {
  background-image: url(../img/exchange/slogan_ru.png);
}

.lang_es .exc_slogan {
  background-image: url(../img/exchange/slogan_es.png);
}

.lang_my .exc_slogan {
  background-image: url(../img/exchange/slogan_my.png);
}

.lang_fr .exc_slogan {
  background-image: url(../img/exchange/slogan_fr.png);
}

.lang_de .exc_slogan {
  background-image: url(../img/exchange/slogan_de.png);
}

.lang_ja .exc_slogan {
  background-image: url(../img/exchange/slogan_ja.png);
}

.exc_cont {
  position: relative;
  padding-top: 1px;
  padding-bottom: calc(150 / var(--screen-width) * var(--screen-maxwidth));
}

.exc_contin {
  width: calc(1134 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(567 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/exchange/exchange_contbox.png) no-repeat;
  background-size: 100% 100%;
  margin: calc(98 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
  position: relative;
  box-sizing: border-box;
  padding: calc(90 / var(--screen-width) * var(--screen-maxwidth)) calc(108 / var(--screen-width) * var(--screen-maxwidth)) 0;
}

.exc_top {
  height: calc(120 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
  display: flex;
  border-bottom: #b8853b solid 1px;
  justify-content: space-between;
}

.exc_top_info {
  width: calc(548 / var(--screen-width) * var(--screen-maxwidth));
  display: flex;
  align-items: center;
  height: calc(50 / var(--screen-width) * var(--screen-maxwidth));
  margin-top: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  position: relative;
}

.exc_tx_img {
  width: calc(50 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(50 / var(--screen-width) * var(--screen-maxwidth));
  border-radius: 50%;
  overflow: hidden;
}
.exc_tx_img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.exc_top_name {
  font-size: calc(40 / var(--screen-width) * var(--screen-maxwidth));
  color: #a17020;
  line-height: 1.1;
  margin-top: calc(4 / var(--screen-width) * var(--screen-maxwidth));
  width: calc(478 / var(--screen-width) * var(--screen-maxwidth));
  position: absolute;
  left: calc(60 / var(--screen-width) * var(--screen-maxwidth));
  top: 50%;
  transform: translate(0, -50%);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.lang_en .exc_top_name, .lang_ru .exc_top_name, .lang_my .exc_top_name, .lang_fr .exc_top_name {
  font-size: calc(32 / var(--screen-width) * var(--screen-maxwidth));
}

.lang_br .exc_top_name, .lang_id .exc_top_name, .lang_ms .exc_top_name, .lang_es .exc_top_name, .lang_de .exc_top_name {
  font-size: calc(28 / var(--screen-width) * var(--screen-maxwidth));
}

.lang_ar .exc_top_name {
  font-size: calc(28 / var(--screen-width) * var(--screen-maxwidth));
  left: unset;
  right: calc(60 / var(--screen-width) * var(--screen-maxwidth));
  text-align: right;
}

.lang_my .exc_top_name {
  line-height: 1.8;
}

.exc_loginbtn, .exc_loginoutbtn {
  width: calc(303 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(73 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/exchange/exc_loginbtn.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: calc(28 / var(--screen-width) * var(--screen-maxwidth));
  color: #ffffff;
  font-weight: normal;
  text-shadow: #af7b2f 0 1px 1px;
}

.exc_loginbtn {
  font-family: "HOK-title";
}
.lang_ar .exc_loginbtn {
  font-family: "AR_Bold";
}

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

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

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

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

.exc_loginoutbtn {
  font-family: "HOK-title";
}
.lang_ar .exc_loginoutbtn {
  font-family: "AR_Bold";
}

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

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

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

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

.exc_bot {
  width: 100%;
  position: relative;
  padding-top: calc(66 / var(--screen-width) * var(--screen-maxwidth));
  pointer-events: none;
}

.exc_bot_tit {
  font-size: calc(30 / var(--screen-width) * var(--screen-maxwidth));
  color: #aeaeae;
  line-height: 1.1;
  font-family: "HOK-title";
}
.lang_ar .exc_bot_tit {
  font-family: "AR_Bold";
}

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

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

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

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

.exc_bot_iptbox {
  display: flex;
  justify-content: space-between;
  margin: calc(12 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
  align-items: center;
}

.exc_bot_ipt {
  width: calc(564 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(89 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/exchange/exc_code_ipt.png) no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: calc(4 / var(--screen-width) * var(--screen-maxwidth)) calc(32 / var(--screen-width) * var(--screen-maxwidth));
}
.exc_bot_ipt input {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: none;
  background: none;
  outline: none;
  font-size: calc(28 / var(--screen-width) * var(--screen-maxwidth));
  color: #ffffff;
}
.exc_bot_ipt input::placeholder {
  font-size: calc(28 / var(--screen-width) * var(--screen-maxwidth));
  color: #d4d4d4;
}
.exc_bot_ipt input::-webkit-outer-spin-button, .exc_bot_ipt input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}

.exc_changebtn {
  display: block;
  width: calc(303 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(74 / var(--screen-width) * var(--screen-maxwidth));
  background: url(../img/exchange/exc_okbtn.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(28 / var(--screen-width) * var(--screen-maxwidth));
  color: #ffffff;
  text-shadow: #969594 0 1px 1px;
  font-family: "HOK-title";
}
.lang_ar .exc_changebtn {
  font-family: "AR_Bold";
}

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

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

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

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

.exc_bot_tips {
  font-size: calc(20 / var(--screen-width) * var(--screen-maxwidth));
  color: #848484;
  margin: calc(16 / var(--screen-width) * var(--screen-maxwidth)) auto 0;
}

.exc_contin.exclogined .exc_tx_img {
  width: calc(40 / var(--screen-width) * var(--screen-maxwidth));
  height: calc(40 / var(--screen-width) * var(--screen-maxwidth));
  border: #815b1d solid 1px;
  box-sizing: border-box;
  padding: 0;
}
.exc_contin.exclogined .exc_tx_img img {
  border: none;
  box-sizing: border-box;
  border-radius: 50%;
}
.exc_contin.exclogined .exc_bot {
  pointer-events: inherit;
}
.exc_contin.exclogined .exc_bot_tit {
  color: #b58e55;
}
.exc_contin.exclogined .exc_bot_ipt {
  background: url(../img/exchange/exc_code_iptlight.png) no-repeat;
  background-size: 100% 100%;
  color: #d2c4ae;
}
.exc_contin.exclogined .exc_bot_ipt::placeholder {
  font-size: calc(28 / var(--screen-width) * var(--screen-maxwidth));
  color: #d2c4ae;
}
.exc_contin.exclogined .exc_bot_tips {
  color: #bc9b6f;
}
.exc_contin.exclogined .exc_changebtn {
  background: url(../img/exchange/exc_okbtnlight.png) no-repeat;
  background-size: 100% 100%;
  color: #fefbec;
  text-shadow: #af7b2f 0 1px 1px;
}

.lang_my #cdkTips {
  line-height: 1.8;
}

#cdkTips {
  margin-top: calc(10 / var(--screen-width) * var(--screen-maxwidth));
}

.h5show {
  display: none !important;
}

.pcshow {
  display: block !important;
}

@media screen and (max-width: 1200px) {
  .h5show {
    display: block !important;
  }
  .pcshow {
    display: none !important;
  }
  .exc_in {
    background: url(../img/exchange/exchange_bgm.jpg) no-repeat;
    background-size: 100% auto;
    background-position: 0 calc(464 / var(--screen-width) * var(--screen-maxwidth));
  }
  .exc_banner {
    height: calc(488 / var(--screen-width) * var(--screen-maxwidth));
  }
  .exc_slogan {
    width: calc(750 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(122 / var(--screen-width) * var(--screen-maxwidth));
    top: calc(218 / var(--screen-width) * var(--screen-maxwidth));
  }
  .exc_contin {
    width: calc(750 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(376 / var(--screen-width) * var(--screen-maxwidth));
    padding: calc(58 / var(--screen-width) * var(--screen-maxwidth)) calc(74 / var(--screen-width) * var(--screen-maxwidth)) 0;
  }
  .exc_top {
    height: calc(80 / var(--screen-width) * var(--screen-maxwidth));
  }
  .exc_top, .exc_bot {
    transform: scale(0.9);
  }
  .exc_top_info {
    width: calc(390 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(33 / var(--screen-width) * var(--screen-maxwidth));
    margin-top: calc(8 / var(--screen-width) * var(--screen-maxwidth));
  }
  .exc_tx_img {
    width: calc(33 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(33 / var(--screen-width) * var(--screen-maxwidth));
  }
  .exc_top_name {
    width: calc(324 / var(--screen-width) * var(--screen-maxwidth));
    font-size: calc(26 / var(--screen-width) * var(--screen-maxwidth));
    left: calc(49 / var(--screen-width) * var(--screen-maxwidth));
  }
  .lang_en .exc_top_name, .lang_br .exc_top_name, .lang_id .exc_top_name, .lang_ms .exc_top_name, .lang_tr .exc_top_name, .lang_my .exc_top_name, .lang_es .exc_top_name {
    font-size: calc(22 / var(--screen-width) * var(--screen-maxwidth));
  }
  .lang_ru {
    font-size: calc(26 / var(--screen-width) * var(--screen-maxwidth));
  }
  .lang_ar .exc_top_name {
    font-size: calc(22 / var(--screen-width) * var(--screen-maxwidth));
  }
  .exc_loginbtn, .exc_loginoutbtn {
    width: calc(198 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(48 / var(--screen-width) * var(--screen-maxwidth));
    font-size: calc(18 / var(--screen-width) * var(--screen-maxwidth));
  }
  .exc_bot {
    padding-top: calc(40 / var(--screen-width) * var(--screen-maxwidth));
  }
  .exc_bot_tit {
    font-size: calc(20 / var(--screen-width) * var(--screen-maxwidth));
  }
  .exc_bot_iptbox {
    height: calc(58 / var(--screen-width) * var(--screen-maxwidth));
    margin-top: calc(6 / var(--screen-width) * var(--screen-maxwidth));
  }
  .exc_bot_ipt {
    width: calc(362 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(58 / var(--screen-width) * var(--screen-maxwidth));
  }
  .exc_bot_ipt input {
    font-size: calc(18 / var(--screen-width) * var(--screen-maxwidth));
  }
  .exc_bot_ipt input::placeholder {
    font-size: calc(14 / var(--screen-width) * var(--screen-maxwidth));
  }
  .exc_changebtn {
    width: calc(198 / var(--screen-width) * var(--screen-maxwidth));
    height: calc(48 / var(--screen-width) * var(--screen-maxwidth));
    font-size: calc(18 / var(--screen-width) * var(--screen-maxwidth));
  }
  .exc_bot_tips {
    margin-top: calc(10 / var(--screen-width) * var(--screen-maxwidth));
    font-size: calc(16 / var(--screen-width) * var(--screen-maxwidth));
  }
}
@media screen and (max-width: 900px) {
  .hok_store_btnbox {
    position: absolute;
    left: 0;
    top: calc(-97 / var(--screen-width2) * var(--screen-maxwidth));
    margin: 0;
  }
  .hok_store_btnbox a {
    width: calc(66 / var(--screen-width2) * var(--screen-maxwidth));
    height: calc(66 / var(--screen-width2) * var(--screen-maxwidth));
    margin: 0 changeClac(10);
  }
  .lang_br .hok_store_btnbox a {
    margin: 0 changeClac(5);
  }
  .hok_store_para {
    margin-top: calc(84 / var(--screen-width2) * var(--screen-maxwidth));
    font-size: calc(25 / var(--screen-width2) * var(--screen-maxwidth));
  }
  .hok_stbox {
    top: 82vh;
  }
  .hok_stbox a {
    position: relative;
    z-index: 50;
  }
}