.compatibleStyle {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Chrome 和 Safari */
  -moz-backface-visibility: hidden;
  /* Firefox */
  -ms-backface-visibility: hidden;
  /* Internet Explorer */
  -webkit-perspective: 0;
  -webkit-transform: translate3d(0, 0, 0);
  visibility: visible;
}
body,
dl,
dd,
ul,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
p,
form,
header,
section,
article,
footer {
  margin: 0;
}
body,
button,
input,
select,
textarea {
  font: 12px/1.5 tahoma, '\5FAE\8F6F\96C5\9ED1', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}
em,
b {
  font-style: normal;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
img {
  border: 0;
  width: 100%;
  height: auto;
  display: block;
}
button,
input,
select,
textarea {
  font-size: 100%;
  outline: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th,
ul,
ol {
  padding: 0;
}
html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #e6eef1;
}
/* 语言适配 */
/* 英语 */
@font-face {
  font-family: 'all';
  src: url('//www.pubgmobile.com/act/resource/long_cache_30d/fonts/all.ttf') format('truetype');
}
/* 俄语 */
@font-face {
  font-family: 'ru';
  src: url('//www.pubgmobile.com/act/resource/long_cache_30d/fonts/ru.ttf') format('truetype');
}
/* 泰语 */
@font-face {
  font-family: 'th';
  src: url('//www.pubgmobile.com/act/resource/long_cache_30d/fonts/th.ttf') format('truetype');
}
/* 越南语 */
@font-face {
  font-family: 'vi';
  src: url('//www.pubgmobile.com/act/resource/long_cache_30d/fonts/vi.ttf') format('truetype');
}
/* 土耳其语 */
@font-face {
  font-family: 'tr';
  src: url('//www.pubgmobile.com/act/resource/long_cache_30d/fonts/tr.otf') format('truetype');
}
/* 阿拉伯语 */
@font-face {
  font-family: 'ar';
  src: url('//www.pubgmobile.com/act/resource/long_cache_30d/fonts/ar.ttf') format('truetype');
}
body {
  font-family: 'all';
}
/* lang_en */
.lang_en {
  font-family: "all", Arial, Helvetica, sans-serif;
}
/* lang_ru */
.lang_ru {
  font-family: "ru", Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}
/* lang_de */
.lang_de {
  font-family: "all", Arial, Helvetica, sans-serif;
}
/* lang_hk */
.lang_hk {
  font-family: 'Noto Sans TC', 'Microsoft JhengHei', 'PingFangTC-Regular', sans-serif;
  letter-spacing: 0;
}
/* lang_tw */
.lang_tw {
  font-family: 'Noto Sans TC', 'Microsoft JhengHei', 'PingFangTC-Regular', sans-serif;
  letter-spacing: 0;
}
/* lang_th */
.lang_th {
  font-family: "th", Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}
/* lang_vi */
.lang_vi {
  font-family: "vi", Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}
/* lang_id */
.lang_id {
  font-family: "all", Arial, Helvetica, sans-serif;
}
/* lang_pt */
.lang_pt {
  font-family: "all", Arial, Helvetica, sans-serif;
}
/* lang_fr */
.lang_fr {
  font-family: "all", Arial, Helvetica, sans-serif;
}
/* lang_es */
.lang_es {
  font-family: "all", Arial, Helvetica, sans-serif;
}
/* lang_tr */
.lang_tr {
  font-family: 'tr', Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}
/* lang_ms */
.lang_ms {
  font-family: "all", Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}
/* lang_zh */
.lang_zh {
  font-family: "Noto Sans SC", 'Microsoft JhengHei', 'PingFangTC-Regular', sans-serif;
  letter-spacing: 0;
}
/* lang_ar */
.lang_ar {
  font-family: "ar", Arial, Helvetica, sans-serif;
  unicode-bidi: bidi-override;
  letter-spacing: 0;
}
.dis-none {
  display: none;
}
.i-img {
  display: block;
  background-size: 100% auto;
  background-repeat: no-repeat;
  appearance: none;
  outline: none;
  background-color: transparent !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.lr-center {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
.tb-center {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
}
.pos-top-left {
  position: absolute;
  left: 0;
  top: 0;
}
.container {
  width: 100vw;
  height: 100vh;
  overflow: unset;
}
.content {
  width: 100%;
  height: calc(900 / 1920 * 100vw);
}
.swiper-slide {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}
.swiper-slide * {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}
.sprite {
  display: inline-block;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url('../images/sprite0_new.png');
  background-size: calc(2048 / 1920 * 100vw) calc(2042 / 1920 * 100vw);
}
.sprite1 {
  display: inline-block;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url('../images/sprite1_new.png');
  background-size: calc(2046 / 1920 * 100vw) calc(2036 / 1920 * 100vw);
}
.sprite2 {
  display: inline-block;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url('../images/sprite2_new.png');
  background-size: calc(783 / 1920 * 100vw) calc(933 / 1920 * 100vw);
}
.sprite3 {
  display: inline-block;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url('../images/sprite3_new.png');
  background-size: calc(462 / 1920 * 100vw) calc(663 / 1920 * 100vw);
}
.page1 {
  position: relative;
  height: calc(900 / 1920 * 100vw);
}
.page1 .bg {
  top: 50%;
  left: 50%;
  width: 100%;
  height: calc(900 / 1920 * 100vw);
  background-image: url('../images/page1_bg/page1_bg01.jpg');
  background-size: 100% 100%;
  transform: translate3d(-50%, -50%, 0);
  -webkit-transform: translate3d(-50%, -50%, 0);
}
.page1 #page1bg {
  top: 50%;
  left: 50%;
  width: 100% !important;
  height: 100% !important;
  transform: translate3d(-50%, -50%, 0);
  -webkit-transform: translate3d(-50%, -50%, 0);
}
.page1 .shadow {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6) !important;
}
.page1 .snow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: calc(1080 / 1920 * 100vw);
  background-position: calc(-1 / 1920 * 100vw) calc(-1 / 1920 * 100vw);
  transform: translate3d(-50%, -50%, 0);
  -webkit-transform: translate3d(-50%, -50%, 0);
}
.page1 .main-box {
  left: 50%;
  width: calc(1225 / 1920 * 100vw);
  height: calc(452 / 1920 * 100vw);
  transform: translate3d(-50%, 0, 0);
  -webkit-transform: translate3d(-50%, 0, 0);
}
.page1 .main-box .title-box {
  position: relative;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 58.40707965%;
  background-position: calc(-1 / 1920 * 100vw) calc(-1083 / 1920 * 100vw);
  overflow: unset;
}
.page1 .main-box .title-box .title1 {
  margin: calc(5 / 1920 * 100vw) auto calc(33 / 1920 * 100vw);
  width: calc(862 / 1920 * 100vw);
  height: calc(50 / 1920 * 100vw);
  overflow: hidden;
  background-image: url('../images/sprite1_new.png');
  background-size: calc(2039 / 1920 * 100vw) calc(1343 / 1920 * 100vw);
  background-position: calc(-886 / 1920 * 100vw) calc(-1237 / 1920 * 100vw);
}
.page1 .main-box .title-box .flex-box {
  margin: 0 auto calc(15 / 1920 * 100vw);
  display: flex;
  display: -webkit-flex;
  width: calc(1030 / 1920 * 100vw);
  color: #94cbe7;
  font-size: calc(32 / 1920 * 100vw);
  line-height: calc(32 / 1920 * 100vw);
  font-weight: bold;
}
.page1 .main-box .title-box .flex-box .title2,
.page1 .main-box .title-box .flex-box .title3 {
  width: 50%;
  text-align: center;
}
.page1 .main-box .title-box .video-btn {
  bottom: calc(-62 / 1920 * 100vw);
  width: calc(129 / 1920 * 100vw);
  height: calc(130 / 1920 * 100vw);
  background-position: calc(-1880 / 1920 * 100vw) calc(-171 / 1920 * 100vw);
}
.page1 .main-box .btn-box {
  margin: calc(90 / 1920 * 100vw) auto 0;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  width: 59.91836735%;
  height: calc(98 / 1920 * 100vw);
  line-height: calc(98 / 1920 * 100vw);
}
.page1 .main-box .btn-box .btn {
  width: 46.32152589%;
  height: 100%;
  background-position: calc(-1 / 1920 * 100vw) calc(-1926 / 1920 * 100vw);
  text-align: center;
  font-size: calc(32 / 1920 * 100vw);
  font-weight: bold;
  color: #ffffff;
}
.page1.no-go .btn-box {
  justify-content: center;
}
.page1.no-go .btn-box .go-btn {
  display: none !important;
}
.lang_en .page1 .main-box .title-box .title1 {
  width: calc(862 / 1920 * 100vw);
  height: calc(50 / 1920 * 100vw);
  overflow: hidden;
  background-image: url('../images/sprite1_new.png');
  background-size: calc(2046 / 1920 * 100vw) calc(2036 / 1920 * 100vw);
  background-position: calc(-1183 / 1920 * 100vw) calc(-1031 / 1920 * 100vw);
}
.lang_ru .page1 .main-box .title-box .title1 {
  width: calc(883 / 1920 * 100vw);
  height: calc(50 / 1920 * 100vw);
  overflow: hidden;
  background-image: url('../images/sprite1_new.png');
  background-size: calc(2046 / 1920 * 100vw) calc(2036 / 1920 * 100vw);
  background-position: calc(-714 / 1920 * 100vw) calc(-1797 / 1920 * 100vw);
}
.lang_de .page1 .main-box .title-box .title1 {
  width: calc(954 / 1920 * 100vw);
  height: calc(54 / 1920 * 100vw);
  overflow: hidden;
  background-image: url('../images/sprite0_new.png');
  background-size: calc(2048 / 1920 * 100vw) calc(2042 / 1920 * 100vw);
  background-position: calc(-1 / 1920 * 100vw) calc(-1987 / 1920 * 100vw);
}
.lang_hk .page1 .main-box .title-box .title1 {
  width: calc(737 / 1920 * 100vw);
  height: calc(59 / 1920 * 100vw);
  overflow: hidden;
  background-image: url('../images/sprite1_new.png');
  background-size: calc(2046 / 1920 * 100vw) calc(2036 / 1920 * 100vw);
  background-position: calc(-683 / 1920 * 100vw) calc(-1916 / 1920 * 100vw);
}
.lang_tw .page1 .main-box .title-box .title1 {
  width: calc(737 / 1920 * 100vw);
  height: calc(59 / 1920 * 100vw);
  overflow: hidden;
  background-image: url('../images/sprite1_new.png');
  background-size: calc(2046 / 1920 * 100vw) calc(2036 / 1920 * 100vw);
  background-position: calc(-683 / 1920 * 100vw) calc(-1916 / 1920 * 100vw);
}
.lang_th .page1 .main-box .title-box .title1 {
  width: calc(738 / 1920 * 100vw);
  height: calc(65 / 1920 * 100vw);
  overflow: hidden;
  background-image: url('../images/sprite1_new.png');
  background-size: calc(2046 / 1920 * 100vw) calc(2036 / 1920 * 100vw);
  background-position: calc(-683 / 1920 * 100vw) calc(-1849 / 1920 * 100vw);
}
.lang_vi .page1 .main-box .title-box .title1 {
  width: calc(898 / 1920 * 100vw);
  height: calc(65 / 1920 * 100vw);
  overflow: hidden;
  background-image: url('../images/sprite0_new.png');
  background-size: calc(2048 / 1920 * 100vw) calc(2042 / 1920 * 100vw);
  background-position: calc(-1138 / 1920 * 100vw) calc(-1855 / 1920 * 100vw);
}
.lang_id .page1 .main-box .title-box .title1 {
  width: calc(909 / 1920 * 100vw);
  height: calc(50 / 1920 * 100vw);
  overflow: hidden;
  background-image: url('../images/sprite0_new.png');
  background-size: calc(2048 / 1920 * 100vw) calc(2042 / 1920 * 100vw);
  background-position: calc(-1138 / 1920 * 100vw) calc(-1922 / 1920 * 100vw);
}
.lang_pt .page1 .main-box .title-box .title1 {
  width: calc(941 / 1920 * 100vw);
  height: calc(59 / 1920 * 100vw);
  overflow: hidden;
  background-image: url('../images/sprite0_new.png');
  background-size: calc(2048 / 1920 * 100vw) calc(2042 / 1920 * 100vw);
  background-position: calc(-1104 / 1920 * 100vw) calc(-1974 / 1920 * 100vw);
}
.lang_fr .page1 .main-box .title-box .title1 {
  width: calc(944 / 1920 * 100vw);
  height: calc(51 / 1920 * 100vw);
  overflow: hidden;
  background-image: url('../images/sprite1_new.png');
  background-size: calc(2046 / 1920 * 100vw) calc(2036 / 1920 * 100vw);
  background-position: calc(-885 / 1920 * 100vw) calc(-1692 / 1920 * 100vw);
}
.lang_es .page1 .main-box .title-box .title1 {
  width: calc(999 / 1920 * 100vw);
  height: calc(53 / 1920 * 100vw);
  overflow: hidden;
  background-image: url('../images/sprite0_new.png');
  background-size: calc(2048 / 1920 * 100vw) calc(2042 / 1920 * 100vw);
  background-position: calc(-1 / 1920 * 100vw) calc(-1932 / 1920 * 100vw);
}
.lang_tr .page1 .main-box .title-box .title1 {
  width: calc(687 / 1920 * 100vw);
  height: calc(67 / 1920 * 100vw);
  overflow: hidden;
  background-image: url('../images/sprite0_new.png');
  background-size: calc(2048 / 1920 * 100vw) calc(2042 / 1920 * 100vw);
  background-position: calc(-1138 / 1920 * 100vw) calc(-1644 / 1920 * 100vw);
}
.lang_ar .page1 .main-box .title-box .title1 {
  width: calc(740 / 1920 * 100vw);
  height: calc(53 / 1920 * 100vw);
  overflow: hidden;
  background-image: url('../images/sprite1_new.png');
  background-size: calc(2046 / 1920 * 100vw) calc(2036 / 1920 * 100vw);
  background-position: calc(-1183 / 1920 * 100vw) calc(-1083 / 1920 * 100vw);
}
.lang_ar .page1 .main-box .title-box .flex-box,
.lang_ar .page1 .main-box .btn-box,
.lang_ar .page2 .main-box .text,
.lang_ar .page2-modal .content .text,
.lang_ar .page3 .main-box .list-box .icon .text,
.lang_ar .page3 .main-box .bottom-text,
.lang_ar .page4 .main-box .title-box .title2,
.lang_ar .page4 .main-box .title-box .time,
.lang_ar .page4 .main-box .btn-box {
  direction: rtl;
}
.lang_ms .page1 .main-box .title-box .title1 {
  width: calc(939 / 1920 * 100vw);
  height: calc(50 / 1920 * 100vw);
  overflow: hidden;
  background-image: url('../images/sprite1_new.png');
  background-size: calc(2046 / 1920 * 100vw) calc(2036 / 1920 * 100vw);
  background-position: calc(-885 / 1920 * 100vw) calc(-1745 / 1920 * 100vw);
}
.lang_zh .page1 .main-box .title-box .title1 {
  width: calc(738 / 1920 * 100vw);
  height: calc(58 / 1920 * 100vw);
  overflow: hidden;
  background-image: url('../images/sprite1_new.png');
  background-size: calc(2046 / 1920 * 100vw) calc(2036 / 1920 * 100vw);
  background-position: calc(-683 / 1920 * 100vw) calc(-1977 / 1920 * 100vw);
}
.page2 {
  position: relative;
  height: calc(900 / 1920 * 100vw);
  overflow: hidden;
}
.page2 .page-bg {
  top: 50%;
  left: 50%;
  width: 100%;
  height: calc(1080 / 1920 * 100vw);
  background-image: url('../images/page2_bg_m.jpg');
  background-size: 100% 100%;
  transform: translate3d(-50%, -50%, 0);
  -webkit-transform: translate3d(-50%, -50%, 0);
}
.page2 .main-box {
  bottom: calc(68 / 1920 * 100vw);
  width: calc(1299 / 1920 * 100vw);
  height: calc(582 / 1920 * 100vw);
}
.page2 .main-box .role-shadow {
  top: 101.71821306%;
  left: 41.64742109%;
  width: 36.95150115%;
  height: 13.74570447%;
  background-position: calc(-1 / 1920 * 100vw) calc(-1571 / 1920 * 100vw);
}
.page2 .main-box .role-shadow2 {
  top: 91.40893471%;
  left: 36.79753657%;
  width: 13.70284834%;
  height: 5.32646048%;
  background-position: calc(-1138 / 1920 * 100vw) calc(-1776 / 1920 * 100vw);
}
.page2 .main-box .role-box {
  position: absolute;
  top: -2.06185567%;
  right: 29.25327175%;
  width: 34.79599692%;
  height: 114.26116838%;
}
.page2 .main-box .role-box .role {
  width: 100%;
  height: 100%;
  background-image: url('../images/role360_pc/role01.png');
}
.page2 .main-box .role-box .spritespin {
  width: 100% !important;
  height: 100% !important;
}
.page2 .main-box .list-box {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.page2 .main-box .list-box .left-box {
  top: 0%;
  left: 0%;
  width: 22.94072363%;
  height: 100%;
}
.page2 .main-box .list-box .left-box .icon-box {
  width: 100%;
  height: 41.0652921%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  pointer-events: visible;
}
.page2 .main-box .list-box .left-box .icon-box .icon {
  opacity: 1;
}
.page2 .main-box .list-box .left-box .icon-box .icon-active {
  opacity: 0;
  width: 0px;
  height: 0px;
}
.page2 .main-box .list-box .left-box .icon-box .line {
  top: 0%;
  left: 0%;
  width: 26.84563758%;
  height: 104.60251046%;
  opacity: 1;
  mask-size: calc(298 / 1920 * 100vw) calc(239 / 1920 * 100vw);
  -webkit-mask-size: calc(298 / 1920 * 100vw) calc(239 / 1920 * 100vw);
  -moz-mask-size: calc(298 / 1920 * 100vw) calc(239 / 1920 * 100vw);
  -ms-mask-size: calc(298 / 1920 * 100vw) calc(239 / 1920 * 100vw);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -moz-mask-repeat: no-repeat;
  -ms-mask-repeat: no-repeat;
}
.page2 .main-box .list-box .left-box .icon-box .bg {
  width: 100%;
  height: 100%;
  opacity: 1;
}
.page2 .main-box .list-box .left-box .icon-box .bg-active {
  width: 100%;
  height: 100%;
  opacity: 0;
}
.page2 .main-box .list-box .left-box .icon-box.active {
  width: 164.4295302%;
  height: 73.5395189%;
}
.page2 .main-box .list-box .left-box .icon-box.active .icon,
.page2 .main-box .list-box .left-box .icon-box.active .bg {
  opacity: 0;
}
.page2 .main-box .list-box .left-box .icon-box.active .line {
  opacity: 0;
}
.page2 .main-box .list-box .left-box .icon-box.active .icon-active,
.page2 .main-box .list-box .left-box .icon-box.active .bg-active {
  opacity: 1;
}
.page2 .main-box .list-box .left-box .icon-box.icon-lt .bg {
  background-image: url('../images/page2_box_bg_lt_pc.png');
}
.page2 .main-box .list-box .left-box .icon-box.icon-lt .bg-active {
  background-image: url('../images/page2_box_bg_lt_active_pc.png');
}
.page2 .main-box .list-box .left-box .icon-box.icon-lt .icon {
  top: 20.08368201%;
  left: 5.36912752%;
  width: 89.59731544%;
  height: 72.38493724%;
  background-position: calc(-1727 / 1920 * 100vw) calc(-1859 / 1920 * 100vw);
}
.page2 .main-box .list-box .left-box .icon-box.icon-lt .line {
  mask-image: url('../images/page2_box_bg_lt_pc.png');
  -webkit-mask-image: url('../images/page2_box_bg_lt_pc.png');
  -moz-mask-image: url('../images/page2_box_bg_lt_pc.png');
  -ms-mask-image: url('../images/page2_box_bg_lt_pc.png');
  animation: mask-move-lt 8s ease-in-out 0s infinite;
  -webkit-animation: mask-move-lt 8s ease-in-out 0s infinite;
}
.page2 .main-box .list-box .left-box .icon-box.icon-lt:hover {
  width: 164.4295302%;
  height: 73.5395189%;
  transform: translate3d(calc(-107 / 1920 * 100vw), calc(-79 / 1920 * 100vw), 0);
  -webkit-transform: translate3d(calc(-107 / 1920 * 100vw), calc(-79 / 1920 * 100vw), 0);
}
.page2 .main-box .list-box .left-box .icon-box.icon-lt:hover .icon,
.page2 .main-box .list-box .left-box .icon-box.icon-lt:hover .bg {
  opacity: 0;
}
.page2 .main-box .list-box .left-box .icon-box.icon-lt:hover .bg-active {
  opacity: 1;
}
.page2 .main-box .list-box .left-box .icon-box.icon-lt:hover .line {
  top: 16.35514019%;
  left: 15.10204082%;
  width: 18.36734694%;
  height: 65.42056075%;
  mask-size: calc(332 / 1920 * 100vw) calc(256 / 1920 * 100vw);
  -webkit-mask-size: calc(332 / 1920 * 100vw) calc(256 / 1920 * 100vw);
  -moz-mask-size: calc(332 / 1920 * 100vw) calc(256 / 1920 * 100vw);
  -ms-mask-size: calc(332 / 1920 * 100vw) calc(256 / 1920 * 100vw);
}
.page2 .main-box .list-box .left-box .icon-box.icon-lt:hover .icon-active {
  opacity: 1;
  top: 28.27102804%;
  left: 18.36734694%;
  width: 61.63265306%;
  height: 42.52336449%;
  background-position: calc(-1423 / 1920 * 100vw) calc(-1849 / 1920 * 100vw);
}
.page2 .main-box .list-box .left-box .icon-box.icon-lt.active {
  width: 164.4295302%;
  height: 73.5395189%;
  transform: translate3d(calc(-107 / 1920 * 100vw), calc(-79 / 1920 * 100vw), 0);
  -webkit-transform: translate3d(calc(-107 / 1920 * 100vw), calc(-79 / 1920 * 100vw), 0);
}
.page2 .main-box .list-box .left-box .icon-box.icon-lt.active .icon-active {
  top: 28.27102804%;
  left: 18.36734694%;
  width: 61.63265306%;
  height: 42.52336449%;
  background-position: calc(-1423 / 1920 * 100vw) calc(-1849 / 1920 * 100vw);
}
.page2 .main-box .list-box .left-box .icon-box.icon-lb {
  top: unset;
  bottom: 0%;
}
.page2 .main-box .list-box .left-box .icon-box.icon-lb .bg {
  background-image: url('../images/page2_box_bg_lb_pc.png');
}
.page2 .main-box .list-box .left-box .icon-box.icon-lb .bg-active {
  background-image: url('../images/page2_box_bg_lb_active_pc.png');
}
.page2 .main-box .list-box .left-box .icon-box.icon-lb .icon {
  top: 10.46025105%;
  left: 5.03355705%;
  width: 56.7114094%;
  height: 81.58995816%;
  background-position: calc(-714 / 1920 * 100vw) calc(-1564 / 1920 * 100vw);
}
.page2 .main-box .list-box .left-box .icon-box.icon-lb .line {
  mask-image: url('../images/page2_box_bg_lb_pc.png');
  -webkit-mask-image: url('../images/page2_box_bg_lb_pc.png');
  -moz-mask-image: url('../images/page2_box_bg_lb_pc.png');
  -ms-mask-image: url('../images/page2_box_bg_lb_pc.png');
  animation: mask-move-lb 9s ease-in-out 0s infinite;
  -webkit-animation: mask-move-lb 9s ease-in-out 0s infinite;
}
.page2 .main-box .list-box .left-box .icon-box.icon-lb:hover {
  top: unset;
  bottom: 0%;
  width: 164.4295302%;
  height: 69.41580756%;
  transform: translate3d(calc(-108 / 1920 * 100vw), calc(77 / 1920 * 100vw), 0);
  -webkit-transform: translate3d(calc(-108 / 1920 * 100vw), calc(77 / 1920 * 100vw), 0);
}
.page2 .main-box .list-box .left-box .icon-box.icon-lb:hover .icon,
.page2 .main-box .list-box .left-box .icon-box.icon-lb:hover .bg {
  opacity: 0;
}
.page2 .main-box .list-box .left-box .icon-box.icon-lb:hover .line {
  top: 17.32673267%;
  left: 15.10204082%;
  width: 18.36734694%;
  height: 69.30693069%;
  mask-size: calc(332 / 1920 * 100vw) calc(250 / 1920 * 100vw);
  -webkit-mask-size: calc(332 / 1920 * 100vw) calc(250 / 1920 * 100vw);
  -moz-mask-size: calc(332 / 1920 * 100vw) calc(250 / 1920 * 100vw);
  -ms-mask-size: calc(332 / 1920 * 100vw) calc(250 / 1920 * 100vw);
}
.page2 .main-box .list-box .left-box .icon-box.icon-lb:hover .bg-active {
  opacity: 1;
}
.page2 .main-box .list-box .left-box .icon-box.icon-lb:hover .icon-active {
  opacity: 1;
  top: 23.01980198%;
  left: 18.57142857%;
  width: 41.63265306%;
  height: 51.73267327%;
  background-position: calc(-1827 / 1920 * 100vw) calc(-1644 / 1920 * 100vw);
}
.page2 .main-box .list-box .left-box .icon-box.icon-lb.active {
  top: unset;
  bottom: 0%;
  height: 69.41580756%;
  transform: translate3d(calc(-108 / 1920 * 100vw), calc(77 / 1920 * 100vw), 0);
  -webkit-transform: translate3d(calc(-108 / 1920 * 100vw), calc(77 / 1920 * 100vw), 0);
}
.page2 .main-box .list-box .left-box .icon-box.icon-lb.active .icon-active {
  opacity: 1;
  top: 23.01980198%;
  left: 18.57142857%;
  width: 41.63265306%;
  height: 51.73267327%;
  background-position: calc(-1827 / 1920 * 100vw) calc(-1644 / 1920 * 100vw);
}
.page2 .main-box .list-box .left-box .icon-box.icon-rt {
  height: 40.54982818%;
}
.page2 .main-box .list-box .left-box .icon-box.icon-rt .bg {
  background-image: url('../images/page2_box_bg_rt_pc.png');
}
.page2 .main-box .list-box .left-box .icon-box.icon-rt .bg-active {
  background-image: url('../images/page2_box_bg_rt_active_pc.png');
}
.page2 .main-box .list-box .left-box .icon-box.icon-rt .icon {
  top: 11.01694915%;
  left: 5.03355705%;
  width: 87.58389262%;
  height: 82.20338983%;
  background-position: calc(-417 / 1920 * 100vw) calc(-516 / 1920 * 100vw);
}
.page2 .main-box .list-box .left-box .icon-box.icon-rt .line {
  height: 105.93220339%;
  mask-image: url('../images/page2_box_bg_rt_pc.png');
  -webkit-mask-image: url('../images/page2_box_bg_rt_pc.png');
  -moz-mask-image: url('../images/page2_box_bg_rt_pc.png');
  -ms-mask-image: url('../images/page2_box_bg_rt_pc.png');
  animation: mask-move-rt 8s ease-out 1s infinite;
  -webkit-animation: mask-move-rt 8s ease-out 1s infinite;
  mask-position: calc(90 / 1920 * 100vw) 0%;
  -webkit-mask-position: calc(90 / 1920 * 100vw) 0%;
  -moz-mask-position: calc(90 / 1920 * 100vw) 0%;
  -ms-mask-position: calc(90 / 1920 * 100vw) 0%;
  transform: translateX(calc(-80 / 1920 * 100vw));
  -webkit-transform: translateX(calc(-80 / 1920 * 100vw));
}
.page2 .main-box .list-box .left-box .icon-box.icon-rt:hover {
  width: 164.4295302%;
  height: 73.5395189%;
  transform: translate3d(calc(-85 / 1920 * 100vw), calc(-80 / 1920 * 100vw), 0);
  -webkit-transform: translate3d(calc(-85 / 1920 * 100vw), calc(-80 / 1920 * 100vw), 0);
}
.page2 .main-box .list-box .left-box .icon-box.icon-rt:hover .icon,
.page2 .main-box .list-box .left-box .icon-box.icon-rt:hover .bg {
  opacity: 0;
}
.page2 .main-box .list-box .left-box .icon-box.icon-rt:hover .line {
  top: 16.35514019%;
  left: 15.10204082%;
  width: 18.36734694%;
  height: 65.42056075%;
  mask-size: calc(332 / 1920 * 100vw) calc(256 / 1920 * 100vw);
  -webkit-mask-size: calc(332 / 1920 * 100vw) calc(256 / 1920 * 100vw);
  -moz-mask-size: calc(332 / 1920 * 100vw) calc(256 / 1920 * 100vw);
  -ms-mask-size: calc(332 / 1920 * 100vw) calc(256 / 1920 * 100vw);
}
.page2 .main-box .list-box .left-box .icon-box.icon-rt:hover .bg-active {
  opacity: 1;
}
.page2 .main-box .list-box .left-box .icon-box.icon-rt:hover .icon-active {
  opacity: 1;
  top: 23.8317757%;
  left: 21.63265306%;
  width: 56.73469388%;
  height: 47.19626168%;
  background-position: calc(-1673 / 1920 * 100vw) calc(-1377 / 1920 * 100vw);
}
.page2 .main-box .list-box .left-box .icon-box.icon-rt.active {
  width: 164.4295302%;
  height: 73.5395189%;
  transform: translate3d(calc(-85 / 1920 * 100vw), calc(-80 / 1920 * 100vw), 0);
  -webkit-transform: translate3d(calc(-85 / 1920 * 100vw), calc(-80 / 1920 * 100vw), 0);
}
.page2 .main-box .list-box .left-box .icon-box.icon-rt.active .icon-active {
  top: 23.8317757%;
  left: 21.63265306%;
  width: 56.73469388%;
  height: 47.19626168%;
  background-position: calc(-1673 / 1920 * 100vw) calc(-1377 / 1920 * 100vw);
}
.page2 .main-box .list-box .left-box .icon-box.icon-rb {
  top: unset;
  bottom: 0%;
}
.page2 .main-box .list-box .left-box .icon-box.icon-rb .bg {
  background-image: url('../images/page2_box_bg_rb_pc.png');
}
.page2 .main-box .list-box .left-box .icon-box.icon-rb .bg-active {
  background-image: url('../images/page2_box_bg_rb_active_pc.png');
}
.page2 .main-box .list-box .left-box .icon-box.icon-rb .icon {
  top: 8.78661088%;
  left: 5.03355705%;
  width: 82.2147651%;
  height: 81.58995816%;
  background-position: calc(-534 / 1920 * 100vw) calc(-712 / 1920 * 100vw);
}
.page2 .main-box .list-box .left-box .icon-box.icon-rb .line {
  mask-image: url('../images/page2_box_bg_rb_pc.png');
  -webkit-mask-image: url('../images/page2_box_bg_rb_pc.png');
  -moz-mask-image: url('../images/page2_box_bg_rb_pc.png');
  -ms-mask-image: url('../images/page2_box_bg_rb_pc.png');
  animation: mask-move-rb 8s linear 1s infinite;
  -webkit-animation: mask-move-rb 8s linear 1s infinite;
  mask-position: calc(90 / 1920 * 100vw) 0%;
  -webkit-mask-position: calc(90 / 1920 * 100vw) 0%;
  -moz-mask-position: calc(90 / 1920 * 100vw) 0%;
  -ms-mask-position: calc(90 / 1920 * 100vw) 0%;
  transform: translateX(calc(-80 / 1920 * 100vw));
  -webkit-transform: translateX(calc(-80 / 1920 * 100vw));
}
.page2 .main-box .list-box .left-box .icon-box.icon-rb:hover {
  top: unset;
  bottom: 0%;
  width: 164.4295302%;
  height: 69.41580756%;
  transform: translate3d(calc(-85 / 1920 * 100vw), calc(79 / 1920 * 100vw), 0);
  -webkit-transform: translate3d(calc(-85 / 1920 * 100vw), calc(79 / 1920 * 100vw), 0);
}
.page2 .main-box .list-box .left-box .icon-box.icon-rb:hover .icon,
.page2 .main-box .list-box .left-box .icon-box.icon-rb:hover .bg {
  opacity: 0;
}
.page2 .main-box .list-box .left-box .icon-box.icon-rb:hover .line {
  top: 17.32673267%;
  left: 15.10204082%;
  width: 18.36734694%;
  height: 69.30693069%;
  mask-size: calc(332 / 1920 * 100vw) calc(250 / 1920 * 100vw);
  -webkit-mask-size: calc(332 / 1920 * 100vw) calc(250 / 1920 * 100vw);
  -moz-mask-size: calc(332 / 1920 * 100vw) calc(250 / 1920 * 100vw);
  -ms-mask-size: calc(332 / 1920 * 100vw) calc(250 / 1920 * 100vw);
}
.page2 .main-box .list-box .left-box .icon-box.icon-rb:hover .bg-active {
  opacity: 1;
}
.page2 .main-box .list-box .left-box .icon-box.icon-rb:hover .icon-active {
  opacity: 1;
  top: 22.77227723%;
  left: 23.06122449%;
  width: 53.87755102%;
  height: 51.73267327%;
  background-position: calc(-417 / 1920 * 100vw) calc(-1803 / 1920 * 100vw);
}
.page2 .main-box .list-box .left-box .icon-box.icon-rb.active {
  top: unset;
  bottom: 0%;
  width: 164.4295302%;
  height: 69.41580756%;
  transform: translate3d(calc(-85 / 1920 * 100vw), calc(79 / 1920 * 100vw), 0);
  -webkit-transform: translate3d(calc(-85 / 1920 * 100vw), calc(79 / 1920 * 100vw), 0);
}
.page2 .main-box .list-box .left-box .icon-box.icon-rb.active .icon-active {
  top: 22.77227723%;
  left: 23.06122449%;
  width: 53.87755102%;
  height: 51.73267327%;
  background-position: calc(-417 / 1920 * 100vw) calc(-1803 / 1920 * 100vw);
}
.page2 .main-box .list-box .right-box {
  left: unset;
  right: 0%;
}
.page2 .main-box .text {
  bottom: calc(-150 / 1920 * 100vw);
  width: fit-content;
  font-size: calc(24 / 1920 * 100vw);
  line-height: calc(24 / 1920 * 100vw);
  text-align: center;
  color: #fff;
}
@keyframes mask-move-lt {
  0% {
    mask-position: calc(90 / 1920 * 100vw) 0%;
    -webkit-mask-position: calc(90 / 1920 * 100vw) 0%;
    -moz-mask-position: calc(90 / 1920 * 100vw) 0%;
    -ms-mask-position: calc(90 / 1920 * 100vw) 0%;
    transform: translateX(calc(-80 / 1920 * 100vw));
    -webkit-transform: translateX(calc(-80 / 1920 * 100vw));
  }
  85% {
    mask-position: calc(90 / 1920 * 100vw) 0%;
    -webkit-mask-position: calc(90 / 1920 * 100vw) 0%;
    -moz-mask-position: calc(90 / 1920 * 100vw) 0%;
    -ms-mask-position: calc(90 / 1920 * 100vw) 0%;
    transform: translateX(calc(-80 / 1920 * 100vw));
    -webkit-transform: translateX(calc(-80 / 1920 * 100vw));
  }
  100% {
    mask-position: calc(-330 / 1920 * 100vw) 0%;
    -webkit-mask-position: calc(-330 / 1920 * 100vw) 0%;
    -moz-mask-position: calc(-330 / 1920 * 100vw) 0%;
    -ms-mask-position: calc(-330 / 1920 * 100vw) 0%;
    transform: translateX(calc(320 / 1920 * 100vw));
    -webkit-transform: translateX(calc(320 / 1920 * 100vw));
  }
}
@keyframes mask-move-lb {
  0% {
    mask-position: calc(90 / 1920 * 100vw) 0%;
    -webkit-mask-position: calc(90 / 1920 * 100vw) 0%;
    -moz-mask-position: calc(90 / 1920 * 100vw) 0%;
    -ms-mask-position: calc(90 / 1920 * 100vw) 0%;
    transform: translateX(calc(-80 / 1920 * 100vw));
    -webkit-transform: translateX(calc(-80 / 1920 * 100vw));
  }
  25% {
    mask-position: calc(90 / 1920 * 100vw) 0%;
    -webkit-mask-position: calc(90 / 1920 * 100vw) 0%;
    -moz-mask-position: calc(90 / 1920 * 100vw) 0%;
    -ms-mask-position: calc(90 / 1920 * 100vw) 0%;
    transform: translateX(calc(-80 / 1920 * 100vw));
    -webkit-transform: translateX(calc(-80 / 1920 * 100vw));
  }
  40% {
    mask-position: calc(-330 / 1920 * 100vw) 0%;
    -webkit-mask-position: calc(-330 / 1920 * 100vw) 0%;
    -moz-mask-position: calc(-330 / 1920 * 100vw) 0%;
    -ms-mask-position: calc(-330 / 1920 * 100vw) 0%;
    transform: translateX(calc(320 / 1920 * 100vw));
    -webkit-transform: translateX(calc(320 / 1920 * 100vw));
  }
  100% {
    mask-position: calc(-330 / 1920 * 100vw) 0%;
    -webkit-mask-position: calc(-330 / 1920 * 100vw) 0%;
    -moz-mask-position: calc(-330 / 1920 * 100vw) 0%;
    -ms-mask-position: calc(-330 / 1920 * 100vw) 0%;
    transform: translateX(calc(320 / 1920 * 100vw));
    -webkit-transform: translateX(calc(320 / 1920 * 100vw));
  }
}
@keyframes mask-move-rt {
  0% {
    mask-position: calc(90 / 1920 * 100vw) 0%;
    -webkit-mask-position: calc(90 / 1920 * 100vw) 0%;
    -moz-mask-position: calc(90 / 1920 * 100vw) 0%;
    -ms-mask-position: calc(90 / 1920 * 100vw) 0%;
    transform: translateX(calc(-80 / 1920 * 100vw));
    -webkit-transform: translateX(calc(-80 / 1920 * 100vw));
  }
  10% {
    mask-position: calc(90 / 1920 * 100vw) 0%;
    -webkit-mask-position: calc(90 / 1920 * 100vw) 0%;
    -moz-mask-position: calc(90 / 1920 * 100vw) 0%;
    -ms-mask-position: calc(90 / 1920 * 100vw) 0%;
    transform: translateX(calc(-80 / 1920 * 100vw));
    -webkit-transform: translateX(calc(-80 / 1920 * 100vw));
  }
  27% {
    mask-position: calc(-330 / 1920 * 100vw) 0%;
    -webkit-mask-position: calc(-330 / 1920 * 100vw) 0%;
    -moz-mask-position: calc(-330 / 1920 * 100vw) 0%;
    -ms-mask-position: calc(-330 / 1920 * 100vw) 0%;
    transform: translateX(calc(320 / 1920 * 100vw));
    -webkit-transform: translateX(calc(320 / 1920 * 100vw));
  }
  100% {
    mask-position: calc(-330 / 1920 * 100vw) 0%;
    -webkit-mask-position: calc(-330 / 1920 * 100vw) 0%;
    -moz-mask-position: calc(-330 / 1920 * 100vw) 0%;
    -ms-mask-position: calc(-330 / 1920 * 100vw) 0%;
    transform: translateX(calc(320 / 1920 * 100vw));
    -webkit-transform: translateX(calc(320 / 1920 * 100vw));
  }
}
@keyframes mask-move-rb {
  0% {
    mask-position: calc(90 / 1920 * 100vw) 0%;
    -webkit-mask-position: calc(90 / 1920 * 100vw) 0%;
    -moz-mask-position: calc(90 / 1920 * 100vw) 0%;
    -ms-mask-position: calc(90 / 1920 * 100vw) 0%;
    transform: translateX(calc(-80 / 1920 * 100vw));
    -webkit-transform: translateX(calc(-80 / 1920 * 100vw));
  }
  50% {
    mask-position: calc(90 / 1920 * 100vw) 0%;
    -webkit-mask-position: calc(90 / 1920 * 100vw) 0%;
    -moz-mask-position: calc(90 / 1920 * 100vw) 0%;
    -ms-mask-position: calc(90 / 1920 * 100vw) 0%;
    transform: translateX(calc(-80 / 1920 * 100vw));
    -webkit-transform: translateX(calc(-80 / 1920 * 100vw));
  }
  67% {
    mask-position: calc(-330 / 1920 * 100vw) 0%;
    -webkit-mask-position: calc(-330 / 1920 * 100vw) 0%;
    -moz-mask-position: calc(-330 / 1920 * 100vw) 0%;
    -ms-mask-position: calc(-330 / 1920 * 100vw) 0%;
    transform: translateX(calc(320 / 1920 * 100vw));
    -webkit-transform: translateX(calc(320 / 1920 * 100vw));
  }
  100% {
    mask-position: calc(-330 / 1920 * 100vw) 0%;
    -webkit-mask-position: calc(-330 / 1920 * 100vw) 0%;
    -moz-mask-position: calc(-330 / 1920 * 100vw) 0%;
    -ms-mask-position: calc(-330 / 1920 * 100vw) 0%;
    transform: translateX(calc(320 / 1920 * 100vw));
    -webkit-transform: translateX(calc(320 / 1920 * 100vw));
  }
}
.page3 {
  position: relative;
  height: calc(900 / 1920 * 100vw);
  overflow: hidden;
}
.page3 .page-bg {
  top: 50%;
  left: 50%;
  width: 100%;
  height: calc(1080 / 1920 * 100vw);
  background-image: url('../images/page3_bg_m.jpg');
  background-size: 100% 100%;
  transform: translate3d(-50%, -50%, 0);
  -webkit-transform: translate3d(-50%, -50%, 0);
}
.page3 .main-box {
  left: calc(175 / 1920 * 100vw);
  bottom: calc(74 / 1920 * 100vw);
  width: calc(1055 / 1920 * 100vw);
  height: calc(464 / 1920 * 100vw);
}
.page3 .main-box .role {
  z-index: 150;
  top: -18.53448276%;
  left: -25.49763033%;
  width: 26.16113744%;
  height: 137.5%;
  background-position: calc(-905 / 1920 * 100vw) calc(-537 / 1920 * 100vw);
}
.page3 .main-box .top {
  z-index: 100;
  top: calc(-37 / 1920 * 100vw);
  left: calc(-51 / 1920 * 100vw);
  width: calc(1135 / 1920 * 100vw);
  height: calc(581 / 1920 * 100vw);
  background-position: calc(-1 / 1920 * 100vw) calc(-1349 / 1920 * 100vw);
  pointer-events: none;
}
.page3 .main-box .video-box {
  z-index: 30;
  position: relative;
  width: 78.1042654%;
  height: 100%;
}
.page3 .main-box .video-box #video1 {
  width: 100%;
  height: 100%;
}
.page3 .main-box .video-box .bg {
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8) !important;
  transform: unset;
  -webkit-transform: unset;
}
.page3 .main-box .video-box .video-btn {
  z-index: 100;
  width: 5.6097561%;
  height: 12.71551724%;
  background-position: calc(-1138 / 1920 * 100vw) calc(-1582 / 1920 * 100vw);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.page3 .main-box .list-box {
  position: absolute;
  top: 0;
  right: 0;
  width: 17.81990521%;
  height: 100%;
}
.page3 .main-box .list-box .icon {
  width: 100%;
  height: 24.13793103%;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.page3 .main-box .list-box .icon .text {
  width: 87.76595745%;
  height: fit-content;
  line-height: calc(20 / 1920 * 100vw);
  font-size: calc(16 / 1920 * 100vw);
  color: #a2cce9;
  text-align: center;
}
.page3 .main-box .list-box .icon.active {
  width: 122.45989305%;
  height: 30.81896552%;
  transform: translate3d(calc(-20 / 1920 * 100vw), calc(-16 / 1920 * 100vw), 0);
  -webkit-transform: translate3d(calc(-20 / 1920 * 100vw), calc(-16 / 1920 * 100vw), 0);
}
.page3 .main-box .list-box .icon.active .text {
  top: unset;
  bottom: calc(30 / 1920 * 100vw);
  width: 82.09606987%;
  color: #fcf5d7;
}
.page3 .main-box .list-box .icon:nth-child(1) {
  top: -10.77586207%;
}
.page3 .main-box .list-box .icon:nth-child(2) {
  top: 14.00862069%;
}
.page3 .main-box .list-box .icon:nth-child(3) {
  top: 38.79310345%;
}
.page3 .main-box .list-box .icon:nth-child(4) {
  top: 63.57758621%;
}
.page3 .main-box .list-box .icon:nth-child(5) {
  top: 88.36206897%;
}
.page3 .main-box .list-box .icon1 {
  background-position: calc(-232 / 1920 * 100vw) calc(-291 / 1920 * 100vw);
}
.page3 .main-box .list-box .icon1.active {
  background-position: calc(-1 / 1920 * 100vw) calc(-1 / 1920 * 100vw);
}
.page3 .main-box .list-box .icon2 {
  background-position: calc(-232 / 1920 * 100vw) calc(-405 / 1920 * 100vw);
}
.page3 .main-box .list-box .icon2.active {
  background-position: calc(-232 / 1920 * 100vw) calc(-1 / 1920 * 100vw);
}
.page3 .main-box .list-box .icon3 {
  background-position: calc(-1 / 1920 * 100vw) calc(-436 / 1920 * 100vw);
}
.page3 .main-box .list-box .icon3.active {
  background-position: calc(-1 / 1920 * 100vw) calc(-146 / 1920 * 100vw);
}
.page3 .main-box .list-box .icon4 {
  background-position: calc(-191 / 1920 * 100vw) calc(-519 / 1920 * 100vw);
}
.page3 .main-box .list-box .icon4.active {
  background-position: calc(-232 / 1920 * 100vw) calc(-146 / 1920 * 100vw);
}
.page3 .main-box .list-box .icon5 {
  background-position: calc(-1 / 1920 * 100vw) calc(-550 / 1920 * 100vw);
}
.page3 .main-box .list-box .icon5.active {
  background-position: calc(-1 / 1920 * 100vw) calc(-291 / 1920 * 100vw);
}
.page3 .main-box .bottom-text {
  left: calc(-175 / 1920 * 100vw);
  bottom: calc(-125 / 1920 * 100vw);
  width: fit-content;
  font-size: calc(24 / 1920 * 100vw);
  line-height: calc(24 / 1920 * 100vw);
  text-align: center;
  color: #fff;
}
.page4 {
  position: relative;
  height: calc(900 / 1920 * 100vw);
  overflow: hidden;
}
.page4 .bg {
  top: 50%;
  left: 50%;
  width: 100%;
  height: calc(1080 / 1920 * 100vw);
  background-image: url('../images/page4_bg_m.jpg');
  background-size: 100% 100%;
  transform: translate3d(-50%, -50%, 0);
  -webkit-transform: translate3d(-50%, -50%, 0);
}
.page4 .main-box {
  margin-top: calc(-338 / 1920 * 100vw);
  margin-left: calc(-110 / 1920 * 100vw);
  top: 50%;
  left: 50%;
  width: calc(622 / 1920 * 100vw);
  height: calc(630 / 1920 * 100vw);
}
.page4 .main-box .title-box {
  position: relative;
  width: 100%;
  height: fit-content;
  white-space: nowrap;
}
.page4 .main-box .title-box .title1 {
  margin-left: 50%;
  margin-bottom: calc(20 / 1920 * 100vw);
  width: calc(612 / 1920 * 100vw);
  height: calc(61 / 1920 * 100vw);
  background-position: calc(-1138 / 1920 * 100vw) calc(-1713 / 1920 * 100vw);
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
.page4 .main-box .title-box .title2 {
  margin-left: 50%;
  margin-bottom: calc(27 / 1920 * 100vw);
  width: fit-content;
  color: #daf2ff;
  font-size: calc(34 / 1920 * 100vw);
  font-weight: bold;
  line-height: calc(34 / 1920 * 100vw);
  text-align: center;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
.page4 .main-box .title-box .title3 {
  display: none;
}
.page4 .main-box .title-box .time {
  margin-left: 50%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  width: fit-content;
  color: #fbffc8;
  font-size: calc(37 / 1920 * 100vw);
  line-height: calc(37 / 1920 * 100vw);
  text-align: center;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
.page4 .main-box .title-box .time .wh {
  margin-left: calc(6 / 1920 * 100vw);
  width: calc(33 / 1920 * 100vw);
  height: calc(33 / 1920 * 100vw);
  background-image: url('../images/page4_wh.png');
  background-size: 100% 100%;
}
.page4 .main-box .btn-box {
  margin: calc(334 / 1920 * 100vw) auto 0;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  width: 100%;
  height: calc(121 / 1920 * 100vw);
}
.page4 .main-box .btn-box .btn {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  width: 49.18032787%;
  height: 100%;
  text-align: center;
  font-size: calc(30 / 1920 * 100vw);
  font-weight: bold;
  color: #000;
  text-shadow: 0 0 0.02rem #fff, 0 0 0.02rem #fff, 0 0 0.02rem #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.page4 .main-box .btn-box .go-btn {
  margin-top: calc(13 / 1920 * 100vw);
  height: calc(108 / 1920 * 100vw);
  line-height: calc(108 / 1920 * 100vw);
  background-position: calc(-1673 / 1920 * 100vw) calc(-1581 / 1920 * 100vw);
}
.page4 .main-box .btn-box .harfiai-btn {
  line-height: calc(133 / 1920 * 100vw);
  color: #173559;
  background-position: calc(-1 / 1920 * 100vw) calc(-789 / 1920 * 100vw);
}
.page4.no-go .title-box .title2 {
  display: none;
}
.page4.no-go .title-box .title3 {
  display: block;
}
.page4.no-go .btn-box {
  justify-content: center;
}
.page4.no-go .btn-box .go-btn {
  display: none !important;
}
.page1-video .firstvideo {
  width: 100%;
  height: calc(100%);
}
.page1-video .firstvideo #firstvideo {
  width: 100%;
  height: 100%;
}
.page1-video .tips {
  top: calc(3 / 1920 * 100vw);
  text-align: center;
  font-size: calc(22 / 1920 * 100vw);
  line-height: calc(25 / 1920 * 100vw);
  color: #fff;
}
.page1-video .close-btn {
  top: calc(80 / 1920 * 100vw);
  right: calc(30 / 1920 * 100vw);
  left: unset;
}
.page1-video.show-tips .firstvideo {
  height: calc(100% - (60 / 1920 * 100vw));
}
.page1-video.show-tips .bg {
  background-color: #000000 !important;
}
.page2-modal .content {
  width: calc(1116 / 1920 * 100vw);
  height: calc(555 / 1920 * 100vw);
}
.page2-modal .content .modal-bg {
  z-index: 10;
  top: 1.44144144%;
  left: 1.97132616%;
  width: calc(1094 / 1920 * 100vw);
  height: calc(534 / 1920 * 100vw);
  background-position: calc(-1 / 1920 * 100vw) calc(-1 / 1920 * 100vw);
}
.page2-modal .content .left-top {
  z-index: 50;
  width: calc(785 / 1920 * 100vw);
  height: calc(559 / 1920 * 100vw);
  background-position: calc(-1228 / 1920 * 100vw) calc(-1083 / 1920 * 100vw);
  pointer-events: none;
}
.page2-modal .content .left-box {
  z-index: 20;
  top: 1.26126126%;
  width: calc(781 / 1920 * 100vw);
  height: calc(513 / 1920 * 100vw);
}
.page2-modal .content .left-box .bottom {
  display: none;
  width: 100%;
  height: 100%;
}
.page2-modal .content .left-box .bottom0 {
  background-image: url('../images/page2_modal_bottom0_m.png');
}
.page2-modal .content .left-box .bottom1 {
  background-image: url('../images/page2_modal_bottom1_m.png');
}
.page2-modal .content .left-box .bottom2 {
  background-image: url('../images/page2_modal_bottom2_m.png');
}
.page2-modal .content .left-box .bottom3 {
  background-image: url('../images/page2_modal_bottom3_m.png');
}
.page2-modal .content .left-box .hide0 {
  width: 100%;
  height: 100%;
  background-position: calc(-1097 / 1920 * 100vw) calc(-1 / 1920 * 100vw);
  transition: all 1s;
}
.page2-modal .content .left-box .hide1 {
  width: 100%;
  height: 100%;
  background-position: calc(-890 / 1920 * 100vw) calc(-1177 / 1920 * 100vw);
  transition: all 1s;
}
.page2-modal .content .left-box .hide2 {
  width: 100%;
  height: 100%;
  background-position: calc(-1183 / 1920 * 100vw) calc(-516 / 1920 * 100vw);
  transition: all 1s;
}
.page2-modal .content .left-box .hide3 {
  width: 100%;
  height: 100%;
  background-position: calc(-1 / 1920 * 100vw) calc(-1 / 1920 * 100vw);
  transition: all 1s;
}
.page2-modal .content .left-box .cvs {
  width: 100%;
  height: 100%;
}
.page2-modal .content .left-hide {
  z-index: 30;
  top: 1.26126126%;
  width: calc(781 / 1920 * 100vw);
  height: calc(513 / 1920 * 100vw);
  background-color: rgba(0, 0, 0, 0.6);
}
.page2-modal .content .left-hide .load {
  width: calc(100 / 1920 * 100vw);
  height: calc(100 / 1920 * 100vw);
  background-position: calc(-1002 / 1920 * 100vw) calc(-1932 / 1920 * 100vw);
  animation: loading 1.5s linear 0s infinite;
  -webkit-animation: loading 1.5s linear 0s infinite;
}
.page2-modal .content .head {
  z-index: 40;
  top: 28.82882883%;
  left: 23.29749104%;
  width: calc(97 / 1920 * 100vw);
  height: calc(117 / 1920 * 100vw);
  background-position: calc(-1923 / 1920 * 100vw) calc(-336 / 1920 * 100vw);
  animation: head-move 3s linear 0s infinite;
  -webkit-animation: head-move 3s linear 0s infinite;
  pointer-events: none;
}
.page2-modal .content .tips-bottom {
  z-index: 35;
  top: 20.36036036%;
  left: 16.57706093%;
  width: 37.09677419%;
  height: 48.82882883%;
  pointer-events: none;
}
.page2-modal .content .tips-bottom.tips0 {
  background-position: calc(-474 / 1920 * 100vw) calc(-1018 / 1920 * 100vw);
}
.page2-modal .content .tips-bottom.tips1 {
  background-position: calc(-474 / 1920 * 100vw) calc(-1291 / 1920 * 100vw);
}
.page2-modal .content .tips-bottom.tips2 {
  background-position: calc(-1 / 1920 * 100vw) calc(-1653 / 1920 * 100vw);
}
.page2-modal .content .tips-bottom.tips3 {
  background-position: calc(-1 / 1920 * 100vw) calc(-516 / 1920 * 100vw);
}
.page2-modal .content .right-top {
  z-index: 50;
  left: unset;
  right: 0;
  width: calc(471 / 1920 * 100vw);
  height: calc(551 / 1920 * 100vw);
  background-position: calc(-1 / 1920 * 100vw) calc(-1018 / 1920 * 100vw);
  pointer-events: none;
}
.page2-modal .content .icon-box {
  position: relative;
  z-index: 100;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
  top: 10.45045045%;
  left: 67.92114695%;
  width: calc(313 / 1920 * 100vw);
  height: calc(189 / 1920 * 100vw);
}
.page2-modal .content .icon-box .icon1 {
  display: none;
  width: calc(129 / 1920 * 100vw);
  height: calc(168 / 1920 * 100vw);
  background-position: calc(-1923 / 1920 * 100vw) calc(-172 / 1920 * 100vw);
}
.page2-modal .content .icon-box .icon2 {
  display: none;
  width: calc(68 / 1920 * 100vw);
  height: calc(168 / 1920 * 100vw);
  background-position: calc(-1138 / 1920 * 100vw) calc(-1349 / 1920 * 100vw);
}
.page2-modal .content .icon-box .icon3 {
  display: none;
  width: calc(129 / 1920 * 100vw);
  height: calc(168 / 1920 * 100vw);
  background-position: calc(-1880 / 1920 * 100vw) calc(-1 / 1920 * 100vw);
}
.page2-modal .content .icon-box .icon4 {
  display: none;
  width: calc(91 / 1920 * 100vw);
  height: calc(169 / 1920 * 100vw);
  background-position: calc(-1923 / 1920 * 100vw) calc(-1 / 1920 * 100vw);
}
.page2-modal .content .icon-box .sprit {
  display: none;
}
.page2-modal .content .icon-box .sprit1 {
  width: calc(129 / 1920 * 100vw) !important;
  height: calc(168 / 1920 * 100vw) !important;
}
.page2-modal .content .icon-box .sprit2 {
  width: calc(68 / 1920 * 100vw) !important;
  height: calc(168 / 1920 * 100vw) !important;
}
.page2-modal .content .icon-box .sprit3 {
  width: calc(129 / 1920 * 100vw) !important;
  height: calc(168 / 1920 * 100vw) !important;
}
.page2-modal .content .icon-box .sprit4 {
  width: calc(91 / 1920 * 100vw) !important;
  height: calc(169 / 1920 * 100vw) !important;
}
.page2-modal .content .title {
  z-index: 100;
  top: 53.33333333%;
  left: 64.06810036%;
  width: 30.91397849%;
  height: calc(45 / 1920 * 100vw);
  line-height: calc(45 / 1920 * 100vw);
  text-align: center;
  font-style: italic;
  font-size: calc(45 / 1920 * 100vw);
  color: #edcd78;
}
.page2-modal .content .text {
  z-index: 100;
  top: 53.33333333%;
  left: 64.06810036%;
  width: 28.67383513%;
  line-height: calc(30 / 1920 * 100vw);
  font-size: calc(26 / 1920 * 100vw);
  font-style: italic;
  color: #ffffff;
  text-align: center;
}
.page2-modal .content .close-btn {
  z-index: 100;
  position: absolute;
  top: calc(-20 / 1920 * 100vw);
  left: unset;
  right: calc(-50 / 1920 * 100vw);
}
.page2-modal.active0 .title1,
.page2-modal.active0 .text1 {
  display: block;
}
.page2-modal.active1 .title2,
.page2-modal.active1 .text2 {
  display: block;
}
.page2-modal.active2 .title3,
.page2-modal.active2 .text3 {
  display: block;
}
.page2-modal.active3 .title4,
.page2-modal.active3 .text4 {
  display: block;
}
.page2-modal.active4 .title5,
.page2-modal.active4 .text5 {
  display: block;
}
.page2-modal.active5 .title6,
.page2-modal.active5 .text6 {
  display: block;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}
@keyframes head-move {
  0% {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  5% {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  16.25% {
    transform: translate3d(calc(-40 / 1920 * 100vw), calc(140 / 1920 * 100vw), 0);
    -webkit-transform: translate3d(calc(-40 / 1920 * 100vw), calc(140 / 1920 * 100vw), 0);
    opacity: 1;
  }
  27.5% {
    transform: translate3d(calc(80 / 1920 * 100vw), calc(0 / 1920 * 100vw), 0);
    -webkit-transform: translate3d(calc(80 / 1920 * 100vw), calc(0 / 1920 * 100vw), 0);
    opacity: 1;
  }
  38.75% {
    transform: translate3d(calc(60 / 1920 * 100vw), calc(120 / 1920 * 100vw), 0);
    -webkit-transform: translate3d(calc(60 / 1920 * 100vw), calc(120 / 1920 * 100vw), 0);
    opacity: 1;
  }
  50% {
    transform: translate3d(calc(150 / 1920 * 100vw), calc(0 / 1920 * 100vw), 0);
    -webkit-transform: translate3d(calc(150 / 1920 * 100vw), calc(0 / 1920 * 100vw), 0);
    opacity: 1;
  }
  61.25% {
    transform: translate3d(calc(150 / 1920 * 100vw), calc(125 / 1920 * 100vw), 0);
    -webkit-transform: translate3d(calc(150 / 1920 * 100vw), calc(125 / 1920 * 100vw), 0);
    opacity: 1;
  }
  72.5% {
    transform: translate3d(calc(260 / 1920 * 100vw), calc(-20 / 1920 * 100vw), 0);
    -webkit-transform: translate3d(calc(260 / 1920 * 100vw), calc(-20 / 1920 * 100vw), 0);
    opacity: 1;
  }
  83.75% {
    transform: translate3d(calc(250 / 1920 * 100vw), calc(120 / 1920 * 100vw), 0);
    -webkit-transform: translate3d(calc(250 / 1920 * 100vw), calc(120 / 1920 * 100vw), 0);
    opacity: 1;
  }
  95% {
    transform: translate3d(calc(290 / 1920 * 100vw), calc(30 / 1920 * 100vw), 0);
    -webkit-transform: translate3d(calc(290 / 1920 * 100vw), calc(30 / 1920 * 100vw), 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(calc(290 / 1920 * 100vw), calc(30 / 1920 * 100vw), 0);
    -webkit-transform: translate3d(calc(290 / 1920 * 100vw), calc(30 / 1920 * 100vw), 0);
    opacity: 0;
  }
}
.snow-box {
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  width: 248.32855778vh;
  height: 100vh;
  pointer-events: none;
}
.snow-box .img {
  width: 100% !important;
  height: 100% !important;
}
.snow-box .img-snow {
  width: 100%;
  height: 100%;
  background-image: url('../images/snow/snow01.png');
}
.share-modal .content {
  width: calc(902 / 1920 * 100vw);
  height: calc(479 / 1920 * 100vw);
  background-position: calc(-1 / 1920 * 100vw) calc(-537 / 1920 * 100vw);
  overflow: unset;
}
.share-modal .content .btn-fb {
  left: 18.40354767%;
  top: 25.26096033%;
  width: 25.38802661%;
  height: 49.47807933%;
  background-position: calc(-483 / 1920 * 100vw) calc(-1564 / 1920 * 100vw);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.share-modal .content .btn-tw {
  left: 56.87361419%;
  top: 25.26096033%;
  width: 25.38802661%;
  height: 49.47807933%;
  background-position: calc(-1673 / 1920 * 100vw) calc(-1138 / 1920 * 100vw);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.share-modal .content .close-btn {
  position: absolute;
  top: -13.56993737%;
  right: -8.31485588%;
  width: 7.20620843%;
  height: 13.56993737%;
}
.modal {
  z-index: 5000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.modal .bg {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6) !important;
}
.modal .close-btn {
  z-index: 100;
  width: calc(42 / 1920 * 100vw);
  height: calc(42 / 1920 * 100vw);
  background-image: url('../images/page2_modal_close_pc.png');
}
.arrow {
  z-index: 100;
  position: fixed;
  bottom: 3vh;
  width: calc(98 / 1920 * 100vw);
  height: calc(42 / 1920 * 100vw);
  background-position: calc(-1318 / 1920 * 100vw) calc(-1776 / 1920 * 100vw);
  pointer-events: none;
  animation: arrow-move 2s linear 0s infinite;
  -webkit-animation: arrow-move 2s linear 0s infinite;
}
.audio-btn {
  z-index: 100;
  position: fixed;
  top: calc(50 / 1920 * 100vw);
  right: calc(50 / 1920 * 100vw);
  width: calc(80 / 1920 * 100vw);
  height: calc(80 / 1920 * 100vw);
  background-image: url('../images/page1_audio_btn.png');
}
.audio-btn.lock {
  background-image: url('../images/page1_audio_btn_lock.png');
}
@keyframes arrow-move {
  0% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  25% {
    transform: translateY(calc(10 / 1920 * 100vw));
    -webkit-transform: translateY(calc(10 / 1920 * 100vw));
  }
  75% {
    transform: translateY(calc(-10 / 1920 * 100vw));
    -webkit-transform: translateY(calc(-10 / 1920 * 100vw));
  }
  100% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
}
.in-facebook .video-js .vjs-progress-control:hover .vjs-progress-holder {
  font-size: 1.06666667em;
}
.in-facebook .video-js .vjs-play-progress:before {
  top: -0.63333333em;
  font-size: 0.4em;
}
.in-facebook .tcp-skin .vjs-control-bar {
  font-size: 0.8em;
}
.in-facebook .video-js .vjs-control {
  width: 2em;
}
.in-facebook .tcp-skin .vjs-playback-rate .vjs-playback-rate-value {
  line-height: 2;
}
.in-facebook #orientLayer {
  display: none;
}
@-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);
  }
}
#orientLayer {
  display: none;
  z-index: 999999;
}
@media all and (orientation: portrait) {
  #orientLayer {
    display: block;
  }
}
.mod-orient-layer {
  display: none;
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000;
  z-index: 9997;
}
.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;
  -webkit-background-size: 67px;
  background-size: 67px;
}
.mod-orient-layer__desc {
  margin-top: 20px;
  font-size: 15px;
  color: #fff;
}
.ipad .line{
  display: none !important;
}