/*初始化*/
* {
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*body{height: auto !important}*/
body,
div,
p,
ul,
li,
table,
tbody,
tr,
td,
textarea,
form,
input,
dl,
dt,
dd,
img,
iframe,
header,
nav,
section,
article,
footer,
figure,
figcaption,
menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
header,
nav,
section,
article,
footer,
figure,
figcaption {
  display: block;
}
ol,
ul {
  margin: 0;
  padding: 0;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
a,
li,
ul,
[onclick] {
  -webkit-tap-highlight-color: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
table,
td,
tr {
  border-collapse: collapse;
  border-spacing: 0;
}
em,
strong,
i {
  font-style: normal;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  line-height: 1.4;
  font-weight: 400;
  line-height: initial;
  margin: 0;
}
a {
  text-decoration: none;
  cursor: pointer;
}
a img {
  vertical-align: top;
}
a:focus,
p:focus,
div:focus {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
  background-color: rgba(0, 0, 0, 0);
}

.text-hide {
  text-indent: -9999999px;
}
.auto_img {
  display: block;
  width: 100%;
}
body.act {
  overflow: hidden;
}
body,
html {
  width: 100%;
}
html {
  height: auto;
  overflow: hidden;
}
#cms-content iframe,
#cms-content video,
#cms-content img {
  max-width: 100% !important;
}
body {
  font-family: "Source Han Sans", "Noto Sans CJK SC", "Noto Sans SC",
    "Source Han Serif", "Noto Serif CJK SC", "Noto Serif SC", sans-serif; /* 设置默认字体 */
}
@font-face {
  font-family: "DfgametypeMedium";
  src: url("../fonts/DFGAMETYPE-MEDIUM.ttf");
}
.lang_en {
  font-family: "DfgametypeMedium";
}

/* 横屏样式 */
@media (orientation: landscape) {
  .wraper {
    width: calc(1920 / 1920 * 100vw);
    height: calc(1080 / 1080 * 100vh);
    position: relative;
    background: url(../images/inc/bg.jpg) no-repeat center center /
      calc(1920 / 1920 * 100vw) auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .content {
    width: calc(1920 / 1920 * 100vw);
    min-height: calc(1080 / 1080 * 100vh);
    z-index: 99;
    position: relative;
  }
  .video_box {
    position: fixed;
    left: 0;
    top: 0;
    width: calc(1920 / 1920 * 100vw);
  }
  .video_box video {
    width: calc(1920 / 1920 * 100vw);
    object-fit: cover;
  }
  /* 头部 */
  .header {
    font-size: calc(16 / 1920 * 100vw);
    color: #0ff796;
    position: relative;
    width: 100%;
    height: calc(86 / 1920 * 100vw);
    z-index: 100;
  }
  .header .line1 {
    position: absolute;
    width: calc(1920 / 1920 * 100vw);
    height: 1px;
    background-image: url(../images/inc/line1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .logo_wrap {
    display: flex;
    width: calc(268 / 1920 * 100vw);
    height: calc(42 / 1920 * 100vw);
    background-image: url(../images/inc/header_logo.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: calc(23 / 1920 * 100vw);
    left: calc(48 / 1920 * 100vw);
  }
  .header_logo {
    display: inline-block;
    width: calc(200 / 1920 * 100vw);
    height: 100%;
  }
  .header_logo2 {
    display: inline-block;
    width: calc(46 / 1920 * 100vw);
    height: 100%;
    margin-left: calc(34 / 1920 * 100vw);
  }
  .btn_login,
  .btn_logout {
    color: #0ff796;
    position: absolute;
    top: calc(35 / 1920 * 100vw);
    right: calc(210 / 1920 * 100vw);
  }
  .span-userinfo {
    color: #fff;
    position: absolute;
    top: calc(35 / 1920 * 100vw);
    right: calc(335 / 1920 * 100vw);
  }

  .btn_logout,
  .span-userinfo {
    display: none;
  }

  .btn_language {
    display: block;
    width: calc(136 / 1920 * 100vw);
    height: calc(39 / 1920 * 100vw);
    background: url(../images/inc/select_language.png) no-repeat 0 0/100% 100%;
    position: absolute;
    top: calc(26 / 1920 * 100vw);
    right: calc(46 / 1920 * 100vw);
    color: #e5e5e5;
    font-size: calc(12 / 1920 * 100vw);
  }
  .btn_language p {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(34 / 1920 * 100vw);
  }

  .language_list {
    visibility: hidden;
    width: calc(132 / 1920 * 100vw);
    position: absolute;
    top: calc(64 / 1920 * 100vw);
    right: calc(49 / 1920 * 100vw);
    opacity: 0;
    transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    z-index: 2000;
  }
  .language_list.act {
    opacity: 1;
    visibility: visible;
  }
  .language_list li {
    display: block;
    width: 100%;
    height: calc(34 / 1920 * 100vw);
    background-color: rgba(20, 22, 29, 0.7);
    position: relative;
    z-index: 2;
  }
  .language_list li a {
    display: block;
    width: 100%;
    height: calc(34 / 1920 * 100vw);
    font-size: calc(12 / 1920 * 100vw);
    color: #c0c0c0;
    position: absolute;
    top: 0;
    left: 0;
  }
  .language_list li:hover {
    background-color: rgba(127, 135, 135, 0.8);
  }
  .language_list li a:hover {
    color: #0ff796;
  }
  .language_list li a p {
    display: block;
    width: 100%;
    line-height: calc(18 / 1920 * 100vw);
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
  }
  .link_tips {
    text-align: center;
    margin-top: 8px;
  }
  .footer {
    text-align: center;
    line-height: calc(56 / 1920 * 100vw);
  }
  span.normal_btn {
    color: #fff;
    border-bottom: 1px solid #fff;
    font-size: calc(16 / 1920 * 100vw);
  }
  span.footer_btn {
    font-size: calc(12 / 1920 * 100vw);
    border-bottom: none;
    cursor: pointer;
  }
  .activity_img {
    display: flex;
    flex-wrap: wrap;
    width: calc(1200 / 1920 * 100vw);
    height: calc(173 / 1920 * 100vw);
    margin: calc(60 / 1920 * 100vw) auto 0;
  }
  .activity_img img {
    width: calc(220 / 1920 * 100vw);
    height: calc(124 / 1920 * 100vw);
    margin-left: calc(60 / 1920 * 100vw);
    margin-bottom: calc(20 / 1920 * 100vw);
  }
}
/* 竖屏样式 */
@media (orientation: portrait) {
  .wraper {
    width: calc(375 / 375 * 100vw);
    height: calc(1080 / 1080 * 100vh);
    position: relative;
    background: url(../images/inc/h5/bg.jpg) no-repeat center center /
      calc(375 / 375 * 100vw) auto;
    background-size: 100% 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .content {
    width: calc(375 / 375 * 100vw);
    min-height: calc(1080 / 1080 * 100vh);
    z-index: 99;
    position: relative;
  }
  .video_box {
    position: fixed;
    left: 0;
    top: 0;
    width: calc(375 / 375 * 100vw);
  }
  .video_box video {
    width: calc(375 / 375 * 100vw);
    object-fit: cover;
  }
  /* 头部 */
  .header {
    font-size: calc(12 / 375 * 100vw);
    color: #0ff796;
    position: relative;
    width: 100%;
    height: calc(41 / 375 * 100vw);
    z-index: 100;
  }
  .header .line1 {
    position: absolute;
    width: calc(375 / 375 * 100vw);
    height: 1px;
    background-image: url(../images/inc/line1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .logo_wrap {
    display: flex;
    width: calc(83 / 375 * 100vw);
    height: calc(24 / 375 * 100vw);
    background-image: url(../images/inc/h5/header_logo.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: calc(9 / 375 * 100vw);
    left: calc(19 / 375 * 100vw);
  }
  .header_logo {
    display: inline-block;
    width: calc(200 / 375 * 100vw);
    height: 100%;
  }
  .header_logo2 {
    display: inline-block;
    width: calc(46 / 375 * 100vw);
    height: 100%;
    margin-left: calc(34 / 375 * 100vw);
  }
  .btn_login,
  .btn_logout {
    color: #0ff796;
    position: absolute;
    top: calc(16 / 375 * 100vw);
    right: calc(117 / 375 * 100vw);
  }
  .span-userinfo {
    color: #fff;
    position: absolute;
    top: calc(45 / 375 * 100vw);
    right: calc(20 / 375 * 100vw);
  }

  .btn_logout,
  .span-userinfo {
    display: none;
  }

  .btn_language {
    display: block;
    width: calc(95 / 375 * 100vw);
    height: calc(25 / 375 * 100vw);
    background: url(../images/inc/select_language.png) no-repeat 0 0/100% 100%;
    position: absolute;
    top: calc(12 / 375 * 100vw);
    right: calc(16 / 375 * 100vw);
    color: #e5e5e5;
    font-size: calc(10 / 375 * 100vw);
  }
  .btn_language p {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: calc(25 / 375 * 100vw);
  }

  .language_list {
    visibility: hidden;
    width: calc(132 / 375 * 100vw);
    position: absolute;
    top: calc(64 / 375 * 100vw);
    right: calc(49 / 375 * 100vw);
    opacity: 0;
    transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    z-index: 2000;
  }
  .language_list.act {
    opacity: 1;
    visibility: visible;
  }
  .language_list li {
    display: block;
    width: 100%;
    height: calc(34 / 375 * 100vw);
    background-color: rgba(20, 22, 29, 0.7);
    position: relative;
    z-index: 2;
  }
  .language_list li a {
    display: block;
    width: 100%;
    height: calc(34 / 375 * 100vw);
    font-size: calc(12 / 375 * 100vw);
    color: #c0c0c0;
    position: absolute;
    top: 0;
    left: 0;
  }
  .language_list li:hover {
    background-color: rgba(127, 135, 135, 0.8);
  }
  .language_list li a:hover {
    color: #0ff796;
  }
  .language_list li a p {
    display: block;
    width: 100%;
    line-height: calc(18 / 375 * 100vw);
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
  }
  .link_tips {
    text-align: center;
    margin-top: 8px;
  }
  .footer {
    text-align: center;
    line-height: calc(56 / 375 * 100vw);
  }
  span.normal_btn {
    color: #fff;
    border-bottom: 1px solid #fff;
    font-size: calc(16 / 375 * 100vw);
  }
  span.footer_btn {
    font-size: calc(12 / 375 * 100vw);
    border-bottom: none;
    cursor: pointer;
  }
  .activity_img {
    display: flex;
    margin: auto 0;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-top: calc(50 / 375 * 100vw);
    margin-bottom: calc(20 / 375 * 100vw);
    flex-wrap: wrap;
  }
  .activity_img img {
    width: calc(140 / 375* 100vw);
    height: calc(85 / 375* 100vw);
    margin-bottom: calc(20 / 375* 100vw);
    /* margin-right: calc(20 / 375* 100vw); */
    margin-left: calc(20 / 375* 100vw);
  }
  .activity_img img:nth-child(2),
  .activity_img img:nth-child(4) {
    margin-right: calc(20 / 375 * 100vw);
    margin-bottom: calc(20 / 375 * 100vw);
  }
  .activity_img .activity_img_1 {
    width: calc(375 / 375 * 100vw);
    height: calc(85 / 375 * 100vw);
  }
  .activity_img .activity_img_1 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(20 / 375 * 100vw);
  }
}