body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,
img {
border: 0;
}
ol,
ul {
list-style: none;
}
caption,
th {
text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
q:before,
q:after {
content: "";
}
abbr,
acronym {
border: 0;
font-variant: normal;
}
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
a {
color: #ffffff;
text-decoration: none;
}
#onetrust-pc-sdk .ot-vs-config .ot-acc-hdr div:last-child {
margin-left: 10px !important;
margin-right: 10px !important;
}
#ot-sdk-btn-floating.ot-floating-button::after {
font-size: 12px !important;
}
#onetrust-pc-sdk .ot-vs-config .ot-acc-hdr .ot-cat-header {
margin: 0 10px !important;
}
#onetrust-pc-sdk .ot-vs-config .ot-acc-hdr div:first-child {
margin-left: 10px !important;
}
@font-face {
font-family: Motiram;
src: url(fonts/en/Motiram-Bold.ttf);
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "DIN";
src: url(fonts/en/DINNextLTPro-Regular.ttf);
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "DIN";
src: url(fonts/en/DINNextLTPro-Bold.ttf);
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: sz;
src: url(fonts/cn/sz.ttf);
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "fz";
src: url(fonts/cn/fzlt_zh.ttf);
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "fz";
src: url(fonts/cn/fzlt_ch.ttf);
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "jp";
src: url(89976697701e9916b70f.otf);
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "kr";
src: url(22859c201bf7cf25468c.otf);
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "oth";
src: url(15f424f9449e5858202c.otf);
font-style: normal;
font-weight: normal;
font-display: swap;
}
body.EN .top_bar .top_nav {
font-family: "DIN";
}
body.EN .top_language_selector li {
font-family: "DIN", "oth", sans-serif;
}
body.EN .top_btn_subscribe {
font-family: "DIN";
}
body.EN .top_btn_subscribe span {
line-height: 0.47rem;
}
body.EN .page .page_title {
font-family: "DIN";
text-transform: uppercase;
}
body.EN .page1 .btns .btn_subscribe {
font-family: "DIN";
}
body.EN .page1 .btns .btn_subscribe span {
line-height: 0.68rem;
}
body.EN .scroll_tip .txt {
font-family: Motiram;
}
body.EN .page2 .con .title {
font-family: Motiram;
}
body.EN .page2 .con .des {
font-family: DIN;
}
body.EN .page3 .info .title {
font-family: Motiram;
}
body.EN .page3 .info .des {
font-family: DIN;
}
body.EN .page4 .head .foot_title {
font-family: Motiram;
}
body.EN .page4 .head .btn_support {
font-family: "DIN";
}
body.EN .page4 .head .btn_support span {
line-height: 0.5rem;
}
body.EN .page4 .sns_sec a {
font-family: "DIN";
}
body.EN .pop {
font-family: "DIN";
}
body.EN .pop_title {
font-family: Motiram;
}
body.EN .pop .btn {
text-transform: uppercase;
font-weight: 700;
}
body.EN .pop .pop_foot .btn {
line-height: 0.44rem;
}
body.EN .pop_share .copy_list .copy_item .btn {
line-height: 0.54rem;
}
body.CN .top_bar .top_nav {
font-family: "fz";
letter-spacing: 0.04rem;
}
body.CN .top_btn_subscribe {
font-family: "fz";
}
body.CN .top_btn_subscribe span {
line-height: 0.47rem;
}
body.CN .page .page_title {
font-family: "sz";
text-transform: uppercase;
}
body.CN .page1 .btns .btn_subscribe {
font-family: "fz";
}
body.CN .page1 .btns .btn_subscribe span {
line-height: 0.64rem;
}
body.CN .scroll_tip .txt {
font-family: sz;
}
body.CN .page2 .con .title {
font-family: sz;
}
body.CN .page2 .con .des {
font-family: fz;
}
body.CN .page3 .info .title {
font-family: sz;
}
body.CN .page3 .info .des {
font-family: fz;
}
body.CN .page4 .head .foot_title {
font-family: sz;
}
body.CN .page4 .head .btn_support {
font-family: "fz";
}
body.CN .page4 .head .btn_support span {
line-height: 0.5rem;
}
body.CN .page4 .sns_sec a {
font-family: "fz";
}
body.CN .pop_title {
font-family: fz;
}
body.CN .pop .btn {
text-transform: uppercase;
font-weight: 700;
}
body.JA {
font-family: "jp", "oth", sans-serif;
}
body.JA .pop_title {
font-size: 0.28rem;
}
body.JA .pop .checkbox_sec,
body.JA .page1 .btns .btn_wish {
font-size: 0.14rem;
}
body.JA .pop_subscribe .note {
font-size: 0.16rem;
}
body.JA .page2 .con .title {
font-size: 0.54rem;
}
body.KO {
font-family: "kr", "oth", sans-serif;
}
body.DE,
body.RU,
body.ESLA,
body.PTBR {
font-family: "oth", sans-serif;
}
body.RU .pop_share .copy_list .copy_item .btn {
font-size: 0.14rem;
}
body.RU #ot-sdk-btn.ot-sdk-show-settings,
body.RU #ot-sdk-btn.optanon-show-settings,
body.RU .page4 .links a {
font-size: 0.16rem !important;
}
#onetrust-consent-sdk #onetrust-pc-sdk,
#onetrust-consent-sdk #ot-search-cntr,
#onetrust-consent-sdk #onetrust-pc-sdk .ot-switch.ot-toggle,
#onetrust-consent-sdk #onetrust-pc-sdk ot-grp-hdr1 .checkbox,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-title:after,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-sel-blk,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-fltr-cnt,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-anchor {
background: rgba(1, 21, 35, 0.85) !important;
}
#onetrust-consent-sdk #onetrust-banner-sdk {
background: rgba(1, 21, 35, 0.85) !important;
}
#onetrust-pc-sdk .ot-pc-header {
border: none !important;
}
#onetrust-consent-sdk #onetrust-pc-sdk h3,
#onetrust-consent-sdk #onetrust-pc-sdk h4,
#onetrust-consent-sdk #onetrust-pc-sdk h5,
#onetrust-consent-sdk #onetrust-pc-sdk h6,
#onetrust-consent-sdk #onetrust-pc-sdk p,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-ven-lst .ot-ven-opts p,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-desc,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-title,
#onetrust-consent-sdk #onetrust-pc-sdk .ot-li-title,
#onetrust-consent-sdk #onetrust-pc-sdk .ot-sel-all-hdr span,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-host-lst .ot-host-info,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-fltr-modal #modal-header,
#onetrust-consent-sdk #onetrust-pc-sdk .ot-checkbox label span,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-lst #ot-sel-blk p,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-lst #ot-lst-title h3,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-lst .back-btn-handler p,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-lst .ot-ven-name,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-lst #ot-ven-lst .consent-category,
#onetrust-consent-sdk #onetrust-pc-sdk .ot-leg-btn-container .ot-inactive-leg-btn,
#onetrust-consent-sdk #onetrust-pc-sdk .ot-label-status,
#onetrust-consent-sdk #onetrust-pc-sdk .ot-chkbox label span,
#onetrust-consent-sdk #onetrust-pc-sdk #clear-filters-handler,
#onetrust-consent-sdk #onetrust-pc-sdk .ot-optout-signal {
color: #daebeb !important;
}
#onetrust-consent-sdk #onetrust-policy-title,
#onetrust-consent-sdk #onetrust-policy-text,
#onetrust-consent-sdk .ot-b-addl-desc,
#onetrust-consent-sdk .ot-dpd-desc,
#onetrust-consent-sdk .ot-dpd-title,
#onetrust-consent-sdk #onetrust-policy-text *:not(.onetrust-vendors-list-handler),
#onetrust-consent-sdk .ot-dpd-desc *:not(.onetrust-vendors-list-handler),
#onetrust-consent-sdk #onetrust-banner-sdk #banner-options *,
#onetrust-banner-sdk .ot-cat-header,
#onetrust-banner-sdk .ot-optout-signal {
color: #daebeb !important;
}
#onetrust-consent-sdk #onetrust-pc-btn-handler,
#onetrust-consent-sdk #onetrust-pc-btn-handler.cookie-setting-link {
color: #daebeb !important;
border: none !important;
background-color: transparent !important;
}
#onetrust-consent-sdk #onetrust-accept-btn-handler,
#onetrust-banner-sdk #onetrust-reject-all-handler {
background-color: #14829a !important;
border-color: #14829a !important;
color: #daebeb !important;
}
#onetrust-banner-sdk .onetrust-close-btn-ui {
filter: brightness(0) invert(1);
}
#onetrust-consent-sdk #onetrust-pc-sdk .privacy-notice-link,
#onetrust-consent-sdk #onetrust-pc-sdk .ot-pgph-link,
#onetrust-consent-sdk #onetrust-pc-sdk .category-vendors-list-handler,
#onetrust-consent-sdk #onetrust-pc-sdk .category-vendors-list-handler + a,
#onetrust-consent-sdk #onetrust-pc-sdk .category-host-list-handler,
#onetrust-consent-sdk #onetrust-pc-sdk .ot-ven-link,
#onetrust-consent-sdk #onetrust-pc-sdk .ot-ven-legclaim-link,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-host-lst .ot-host-name a,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-host-lst .ot-acc-hdr .ot-host-expand,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-host-lst .ot-host-info a,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-content #ot-pc-desc .ot-link-btn,
#onetrust-consent-sdk #onetrust-pc-sdk .ot-vnd-serv .ot-vnd-item .ot-vnd-info a,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-lst-cnt .ot-vnd-info a {
line-height: 0.37rem;
background: #0a3041;
border: 1px solid #475960;
border-radius: 5px;
padding: 0 10px;
text-decoration: underline;
text-underline-offset: 4px;
color: #daebeb !important;
display: inline-block !important;
}
#onetrust-pc-sdk .ot-accordion-layout.ot-cat-item .ot-acc-grpdesc {
background: #0a3041;
padding-bottom: 20px;
}
#onetrust-pc-sdk .ot-switch-nob {
background: #0a3041 !important;
border: 1px solid #475960 !important;
outline: none;
}
#onetrust-consent-sdk #onetrust-pc-sdk *:focus,
#onetrust-consent-sdk #onetrust-pc-sdk .ot-vlst-cntr > a:focus {
outline: 1px solid #475960 !important;
}
#onetrust-pc-sdk .ot-switch-nob:before {
background: #176284 !important;
}
#onetrust-pc-sdk #close-pc-btn-handler.ot-close-icon {
filter: brightness(0) invert(1);
}
#ot-sdk-btn-floating.ot-floating-button {
z-index: 21474836471 !important;
}
#onetrust-consent-sdk #onetrust-pc-sdk button:not(#clear-filters-handler):not(.ot-close-icon):not(#filter-btn-handler):not(.ot-remove-objection-handler):not(.ot-obj-leg-btn-handler):not([aria-expanded]):not(.ot-link-btn),
#onetrust-consent-sdk #onetrust-pc-sdk .ot-leg-btn-container .ot-active-leg-btn {
background: url(imgs/one_btn.png) no-repeat 0 0;
background-color: transparent !important;
width: 202px;
height: 30px;
border: none !important;
color: #daebeb;
padding: 0;
line-height: 30px;
}
#onetrust-pc-sdk .ot-pc-footer {
border: none !important;
}
#onetrust-pc-sdk .ot-vs-config .ot-acc-hdr,
#onetrust-pc-sdk ul.ot-subgrps .ot-acc-hdr,
#onetrust-pc-sdk .ot-subgrp-cntr ul.ot-subgrps .ot-acc-hdr,
#onetrust-pc-sdk .ot-vs-list .ot-vnd-item .ot-acc-hdr,
#onetrust-pc-sdk .ot-vnd-serv .ot-vnd-item .ot-acc-hdr,
#onetrust-pc-sdk #ot-pc-lst .ot-vs-list .ot-vnd-item .ot-acc-hdr,
#onetrust-pc-sdk .ot-accordion-layout.ot-checkbox-consent .ot-acc-hdr {
padding: 0.1rem 0 !important;
}
#onetrust-pc-sdk .ot-accordion-layout.ot-cat-item {
border: 1px solid #475960 !important;
}
#onetrust-pc-sdk .ot-accordion-layout.ot-cat-item:first-of-type {
border-top: 1px solid #475960 !important;
}
#ot-sdk-btn-floating {
display: none;
}
#ot-sdk-btn.ot-sdk-show-settings,
#ot-sdk-btn.optanon-show-settings {
border: none !important;
height: auto;
white-space: normal;
word-wrap: break-word;
padding: 0 0.35rem !important;
font-size: 0.22rem !important;
color: #1e5b73 !important;
line-height: 1.2;
cursor: pointer;
transition: 0.1s ease;
}
#ot-sdk-btn.ot-sdk-show-settings:hover,
#ot-sdk-btn.optanon-show-settings:hover {
color: #81adbd !important;
text-decoration: underline !important;
background: none !important;
}
/**
* Swiper 8.4.7
* Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com
*
* Copyright 2014-2023 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: January 30, 2023
*/
@font-face{font-family:swiper-icons;src:url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
html,
body,
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
font-family: "Microsoft Yahei", sans-serif;
font-size: 0.26rem;
color: #fff;
background: #056174;
text-rendering: optimizespeed;
}
.hd {
font-size: 0;
line-height: 0;
}
.wrapper {
display: flex;
flex-direction: column;
}
.top_bar {
width: 100%;
height: 0.63rem;
background: #01080d;
display: flex;
align-items: center;
z-index: 20;
}
.top_bar::after {
width: 7.29rem;
height: 1.55rem;
background: url(imgs/top_bar/pattern.png) no-repeat 50% 50%/7.29rem 1.55rem;
position: absolute;
z-index: -1;
content: "";
top: 0;
right: 0;
opacity: 0.3;
pointer-events: none;
-webkit-mask: linear-gradient(#000, #0000 80%);
mask: linear-gradient(#000, #0000 80%);
}
.top_bar h1.top_logo {
width: 1.16rem;
height: 100%;
background: url("data:image/svg+xml,") no-repeat 50% 50%/0.42rem 0.43rem;
transition: 0.3s;
}
.top_bar h1.top_logo a {
display: block;
width: 100%;
height: 100%;
}
.top_bar h1.top_logo:hover {
transform: scale(1.05);
}
.top_bar .top_nav {
display: flex;
height: 100%;
padding: 0;
font-weight: 700;
margin: 0;
}
.top_bar .top_nav li {
list-style: none;
height: 100%;
text-align: center;
white-space: nowrap;
}
.top_bar .top_nav li a {
display: block;
height: 100%;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
.top_bar .top_nav li a::before {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: url(imgs/top_bar/top_btn_hover.png) no-repeat 50% 50%/100% 100%;
content: "";
opacity: 0;
transition: 0.3s;
}
.top_bar .top_nav li a span {
position: relative;
min-width: 1.98rem;
font-size: 0.2rem;
box-sizing: border-box;
padding: 0 0.1rem;
height: 100%;
color: #54949b;
display: flex;
justify-content: center;
align-items: center;
z-index: 5;
transition: 0.3s;
}
.top_bar .top_nav li a::after {
width: 100%;
height: 0.14rem;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMkAAAAOCAYAAACFKzgJAAACKklEQVRogWL8t4+VYRQMCiDOwMCgwcDAcJGBgeHDaJQMEsDAwAAAAAD//2Ia6QEwSEAIAwPDXQYGhgMMDAw3GRgYbEZ6gAwawMDAAAAAAP//Gs0kAw/CGBgYVjAwMHBDXSLGwMCwbTSjDBLAwMAAAAAA//8azSQDC8IZGBiWMTAwMKO5gpeBgWH7aEYZBICBgQEAAAD//xrNJAMHQBlkKTSD/GNgYFjLwMDQxcDAsB/qIh5oRrEdiYEzaAADAwMAAAD//wJ13EGREcjAwMA50gODjkCCgYGhDqkGiYQ2uWCgloGBoQnK/gLlfxvOATIIwV8GBoZdDAwMjwEAAAD//wJlkt0MDAwuIz1EBhCcZ2BgMEKznoWBgeEFAwOD8IgKicEHXjMwMCgDAAAA//8CNbe0R3pIDDB4jcX6PwwMDG9HVCgMTiDKwMAgCgAAAP//ApVY2QwMDM2jzS26Al5oBICABQMDgwgDA8MbJAeACi4VJP5TBgaGn8M0LAYrADW3ljAwMNwDAAAA//8anUwcGMAF7ZTbQW0/DS2sQHMlpgwMDNMZGBgUoXKgzn08NNJGAb0BAwMDAAAA//8azSQDB7ig8yH2eFwwmkEGGjAwMAAAAAD//xodAh44ABqt8oLOsmMDoxlkMAAGBgYAAAAA//8azSQDC0AZxRtLRlkymkEGCWBgYAAAAAD//xptbg0OABo0qWRgYDCGZpi+0QwySAADAwMAAAD//wMA1ApC3rW/5vUAAAAASUVORK5CYII=) no-repeat 50% 50%/100% 0.14rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -0.07rem;
content: "";
z-index: 6;
width: 0;
opacity: 0;
transition: 0.3s;
}
.top_bar .top_nav li a:hover::before {
opacity: 1;
}
.top_bar .top_nav li a:hover span {
color: #32a3b0;
font-weight: 700;
}
.top_bar .top_nav li.active a::before {
opacity: 1;
}
.top_bar .top_nav li.active a span {
color: #32a3b0;
font-weight: 700;
}
.top_bar .top_nav li.active a::after {
opacity: 1;
width: 100%;
}
.top_bar .top_btn {
width: 0.6rem;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: relative;
}
.top_bar .top_btn svg {
width: 0.3rem;
height: 0.3rem;
}
.top_bar .top_btn svg path,
.top_bar .top_btn svg circle {
stroke: #fff;
stroke-width: 2px;
transition: 0.3s;
}
.top_bar .top_btn:hover svg path,
.top_bar .top_btn.active svg path,
.top_bar .top_btn:hover svg circle,
.top_bar .top_btn.active svg circle {
stroke: #ffbd54;
}
.top_bar .top_btn_discord {
margin-left: auto;
}
.top_bar .top_btn_discord span {
display: block;
width: 0.26rem;
height: 0.26rem;
background: url(imgs/top_bar/icon_epic.png) no-repeat 50% 50%/100% 100%;
}
.top_bar .top_btn_discord:hover svg path {
fill: #ffbd54;
}
.top_bar .top_language_selector {
display: none;
position: absolute;
background: rgba(0, 0, 0, 0.5);
border-radius: 0.1rem;
border: 0.02rem solid rgba(180, 180, 180, 0.5);
left: 50%;
top: 100%;
transform: translateX(-50%);
padding: 0.1rem 0;
}
.top_bar .top_language_selector li a {
background: rgba(0, 0, 0, 0);
display: block;
text-align: center;
text-decoration: none;
width: 100%;
height: 0.4rem;
line-height: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.16rem;
color: #b6d3c6;
transition: 0.3s;
width: 1.4rem;
}
.top_bar .top_language_selector li a:hover,
.top_bar .top_language_selector li a.active {
background: rgba(0, 0, 0, 0.5);
color: #f3b450;
}
.top_bar .top_language_selector li a.active::before,
.top_bar .top_language_selector li a.active::after {
content: "";
width: 0.04rem;
height: 0.04rem;
background: #f3b450;
border-radius: 50%;
overflow: hidden;
margin: 0 0.1rem;
font-size: 0;
}
.top_bar .top_wishes {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.top_bar .top_wishes .top_wish {
font-size: 0.16rem;
border-radius: 0.05rem;
line-height: 0.38rem;
height: 0.38rem;
padding: 0 0.1rem;
white-space: nowrap;
margin-left: 0.12rem;
display: flex;
align-items: center;
background: rgba(0, 0, 0, 0.5);
transition: 0.3s;
position: relative;
}
.top_bar .top_wishes .top_wish::after {
border-radius: 0.05rem;
position: absolute;
left: -0.02rem;
top: -0.02rem;
pointer-events: none;
content: "";
width: 100%;
height: 100%;
border: 0.02rem solid rgba(180, 180, 180, 0.5);
-webkit-mask: linear-gradient(to right, #000 20.1%, #0000 20.1% 30%, #000 30.1%) no-repeat 0 0/100% 20%, linear-gradient(to right, #000, #000) no-repeat 0 100%/100% 90%;
mask: linear-gradient(to right, #000 20.1%, #0000 20.1% 30%, #000 30.1%) no-repeat 0 0/100% 20%, linear-gradient(to right, #000, #000) no-repeat 0 100%/100% 90%;
}
.top_bar .top_wishes .top_wish i {
margin-right: 0.1rem;
}
.top_bar .top_wishes .top_wish:hover {
background: #000000;
}
.top_bar .top_wishes .top_wish:hover::after {
border: 0.02rem solid #b4b4b4;
}
.top_bar .top_wishes .icon_steam {
width: 0.2rem;
height: 0.2rem;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAADr0lEQVRIiXTMMQ3AIAAAwWuCEkzUBUEoClCACxR0aTowMHRhI/x4w1/P9zoUkJBxIy4b6GgoqJjbAz8AAAD//8JleAwDA0MbAwODLC6bkcBdBgaGCqhFCMDAwAAAAAD//0I3nIeBgWEx1LWkguUMDAwpDAwM38AaGRgYAAAAAP//Qjacl4GBYQ8DA4MZGQbDwH4GBgYfsAUMDAwAAAAA//9iglnCwMCwhEiD/0PVBjMwMDgzMDDkMjAw3ITKOTIwMMwEsxgYGAAAAAD//4IZngCNPEIAFHGgIItnYGB4zcDAIM7AwLCRgYFBn4GBYT1UMyi+QhgYGBgAAAAA//8CBQsbAwPDQwYGBgkiDAdFciMDA8MmBgaGJ1AXBzEwMEyBWnKLgYFBEpyaGBhUAAAAAP//jNAxFUARAEDRO5oVEEUCdjVEoIskgjn/HwGsd3jD++IN6/FpQkHEvBawkTHQf6UeAAAA//8CBQuxKeMjAwPDIwYGBhMGBobtSOKgdH+KgYFBGSoPAQwM/gAAAAD//wIZbkWk4TlQ+goDA4M1kjgzAwODKdRgKbgoA4MNAAAA//8C5bgPDAwMMgQMXgtNISAwA5orQZF5A5oYFkF9AApiCGBgUAAAAAD//4KlczsGBoZMaPJiRTP4BQMDgw4DA8NbJDFQIgCFvTQDA8MBBgaGawwMDPMYGBhi4SoYGBgAAAAA//9Cz6Fi0FyWDo00kAsnMTAwHMTiG1De0IUmwwIGBgYjFFkGhj8AAAAA///CVbaAwpET6iNPBgaGWQwMDJeR5EWhLgXlRuyAgeEaAAAA//8CRag2NDkhg78MDAxfGBgYtjEwMExjYGBYCApDqAJ3BgaGSwQMZmBgYDgFAAAA//+CGf6UgYGhB5TwsSi6DrUgkIGBoZaBgWEHURmOgWEtAAAA//8CGQ7KbaCCphiaw0DZGBQksKIBBEBpGBShiUQYCgJ3GRgYtgMAAAD//4IV/nXQMARFEihTeTAwMHhDDRSAGg6qHBSJNLyCgYHhLwAAAP//Qo7QDaBcBWWDBEEp4A40ckHZHpRq+IgwGFSURDMwMDAAAAAA//9CNpwLWh5TUp6DkizI1z8YGBgYAAAAAP//Qg5XULiDymdQbiQHgFwMN5iBgYEBAAAA//9CNhwEQMkvlIGBIQqtEMIHQJEH0gMKCrjBDAwMDAAAAAD//yJU+4PSMigeLKHpnJ2BgeE3AwPDbQYGhpMMDAzroHnhH4ZuBgYGAAAAAP//AwDWZ5cpwVGXBgAAAABJRU5ErkJggg==) no-repeat 50% 50%/100% 100%;
}
.top_bar .top_wishes .icon_epic {
width: 0.18rem;
height: 0.2rem;
background: url(imgs/top_bar/icon_epic.png) no-repeat 50% 50%/100% 100%;
}
.top_bar .top_wishes .icon_discord {
width: 0.2rem;
height: 0.2rem;
background-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 32 32%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Ccircle cx=%2715%27 cy=%2716%27 r=%2714%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27%3E%3C/circle%3E%3Cpath d=%27M22.012 9.515a15.768 15.768 0 0 0-3.994-1.255c-.172.311-.373.73-.512 1.062a14.666 14.666 0 0 0-4.427 0 11.354 11.354 0 0 0-.517-1.062c-1.403.243-2.744.67-3.998 1.258-2.527 3.82-3.213 7.545-2.87 11.217a15.969 15.969 0 0 0 4.899 2.51c.394-.542.746-1.12 1.049-1.727-.577-.22-1.13-.49-1.652-.805.138-.102.274-.21.405-.32 3.185 1.49 6.647 1.49 9.794 0 .133.11.268.218.405.32a10.29 10.29 0 0 1-1.655.806 12.13 12.13 0 0 0 1.05 1.728 15.937 15.937 0 0 0 4.9-2.512c.403-4.257-.686-7.947-2.877-11.22zm-9.936 8.962c-.956 0-1.74-.893-1.74-1.98s.767-1.981 1.74-1.981 1.757.892 1.74 1.981c.002 1.087-.767 1.98-1.74 1.98zm6.432 0c-.956 0-1.74-.893-1.74-1.98s.767-1.981 1.74-1.981 1.757.892 1.74 1.981c0 1.087-.767 1.98-1.74 1.98z%27 fill=%27%23fff%27 style=%27stroke-width:0;%27%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: cover;
}
.top_bar .top_btn_subscribe {
min-width: 1.44rem;
height: 0.44rem;
margin-right: 0.1rem;
margin-left: 0.2rem;
font-size: 0.16rem;
color: #0b1014;
font-weight: 700;
text-transform: uppercase;
transition: 0.3s;
text-align: center;
position: relative;
}
.top_bar .top_btn_subscribe span {
min-width: 1.44rem;
height: 0.44rem;
background: url(imgs/top_bar/top_sub.png) no-repeat 50% 50%/100% 100%;
display: block;
line-height: 0.44rem;
}
.top_bar .top_btn_subscribe::before,
.top_bar .top_btn_subscribe::after {
width: 0.03rem;
height: 0.03rem;
border: 0.02rem solid #dcf0ef;
border-radius: 50%;
content: "";
position: absolute;
top: 0.19rem;
}
.top_bar .top_btn_subscribe::before {
left: -0.06rem;
}
.top_bar .top_btn_subscribe::after {
right: -0.06rem;
}
.top_bar .top_btn_subscribe:hover {
filter: brightness(1.1);
}
.top_bar .bgm {
width: 0.45rem;
margin-right: 0.1rem;
height: 100%;
background: url(imgs/icon_music.png) no-repeat 50% 50%/0.3rem 0.3rem;
cursor: pointer;
}
.top_bar .bgm.off {
opacity: 0.6;
}
.pc {
position: absolute;
left: 50%;
top: 50%;
}
.pages {
height: calc(100% - 0.63rem);
width: 100%;
}
.pages_wrapper {
width: 100%;
height: 100%;
}
.page {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.page .page_title {
font-size: 0.45rem;
white-space: nowrap;
position: absolute;
top: 50%;
left: 0.6rem;
margin-top: -4.6rem;
line-height: 0.7rem;
height: 0.6rem;
padding-left: 0.5rem;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAASCAYAAAC0EpUuAAAB+0lEQVQ4jWL8d5CVgQAoZmBg+MDAwDCXgYEhioGBQYGBgaENpx4GBgYAAAAA//9iImBgCwMDQw8DA0MglA8ytJWBgaEfpw4GBgYAAAAA///CZyjIwGoccgU4DWZgYAAAAAD//8JlKD4D8RvMwMAAAAAA///CZig2A59A6etYDO5DEWFgYAAAAAD//0I3FJuBO6GaQQAktwFNvhDFYAYGBgAAAAD//0I2FJeBAQwMDD+g/F8MDAzheA1mYGAAAAAA//+CGdqExcDDSAZmQfmg5AUzeCtWgxkYGAAAAAD//2TSIQpAIQAE0edlbFZB8AT/3t9iM3kcEUy6cZhpu39a0C5hr+JHxEQ4PKMjYTwV3wIAAP//IpROsYE/eGUZGBgAAAAA//8CGXqcgYGhGYtcOwMDAwcDA8MtBgaGTKirQV48z8DAwAaVRwf9DAwM2wEAAAD//0LOpsREFAiADFwJFUcGIAOLGBgYGAAAAAD//0L2fg00CyIDd2hMg1xMlIEMDAwMAAAAAP//Qg9TXAZPgLJBcngNZGBgYAAAAAD//8IWUdgMloHSmmjiIMtQDGRgYGAAAAAA///CFfvYDEYHIANBEYcKGBgYAAAAAP//wpek8BmM00AGBgYGAAAAAP//YiHgGpDB76GFNAgsgyZB3L5gYGAAAAAA//8DAObkSXLJsU3aAAAAAElFTkSuQmCC) no-repeat 0 50%/0.21rem 0.18rem;
}
.btn {
cursor: pointer;
transition: 0.3s;
}
.btn:hover {
filter: brightness(1.1);
}
.p_icon1 {
background: url(imgs/pi1.png) no-repeat 50% 50%/100% 100%;
}
.p_icon2 {
background: url(imgs/pi2.png) no-repeat 50% 50%/100% 100%;
}
.p_icon3 {
background: url(imgs/pi3.png) no-repeat 50% 50%/100% 100%;
}
.p_icon4 {
background: url(imgs/pi4.png) no-repeat 50% 50%/100% 100%;
}
.page1 {
background: url(imgs/bg_20241205.jpg) no-repeat 50% 50% / cover;
}
.page1 .bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.page1 .bg canvas {
width: 19.2rem;
height: 4rem;
bottom: 0;
position: absolute;
left: 0;
pointer-events: none;
display: none;
}
.page1 .bg video {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 100%;
}
.page1 .bg::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
background-image: radial-gradient(rgba(0, 0, 0, 0.4) 1px, rgba(0, 0, 0, 0.5) 1px);
background-size: 4px 4px;
}
.page1 .slogan {
width: 7.31rem;
height: 2.07rem;
background: url(imgs/slogan_en.png) no-repeat 50% 50%/7.31rem 2.07rem;
margin-left: -3.65rem;
margin-top: -2.5rem;
}
.page1 .btn_play {
width: 1.21rem;
height: 1.22rem;
background: url(imgs/btn_play.png) no-repeat 50% 50%/1.21rem 1.22rem;
margin-left: -0.6rem;
margin-top: -0.6rem;
}
.page1 .btns {
width: 7rem;
margin-left: -3.5rem;
margin-top: 1.1rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.page1 .btns .sub_sec {
width: 100%;
height: 0.66rem;
margin-bottom: 0.15rem;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.page1 .btns .sub_sec .subscribe_prize {
width: 4.13rem;
height: 1.53rem;
background: url(imgs/sub_prize_box.png) no-repeat 50% 50%/4.13rem 1.53rem;
position: absolute;
left: 50%;
top: -2rem;
margin-left: -2.065rem;
box-sizing: border-box;
padding: 0.4rem 0.16rem 0;
display: flex;
justify-content: center;
align-items: center;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
pointer-events: none;
opacity: 0;
transition: 0.5s;
}
.page1 .btns .sub_sec .subscribe_prize .title {
font-size: 0.14rem;
color: #3dadba;
width: 100%;
line-height: 0.32rem;
position: absolute;
left: 0;
top: 0;
text-align: center;
}
.page1 .btns .sub_sec .subscribe_prize .item {
width: 1rem;
text-align: center;
}
.page1 .btns .sub_sec .subscribe_prize .item .icon {
width: 0.6rem;
margin: 0 auto;
height: 0.6rem;
}
.page1 .btns .sub_sec .subscribe_prize .item .name {
color: #3dadba;
font-size: 0.13rem;
height: 0.3rem;
line-height: 1.1;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.page1 .btns .btn_subscribe {
display: block;
margin: 0 auto;
width: 4.78rem;
font-size: 0.36rem;
height: 0.66rem;
line-height: 0.64rem;
color: #0b1014;
font-weight: 700;
text-transform: uppercase;
transition: 0.3s;
position: relative;
background: url(imgs/btn_sub.png) no-repeat 50% 50%/4.78rem 0.66rem;
text-align: center;
}
.page1 .btns .btn_subscribe:hover ~ .subscribe_prize {
opacity: 1;
top: -1.6rem;
}
.page1 .btns .btn_wish {
font-size: 0.2rem;
border-radius: 0.05rem;
background: rgba(0, 0, 0, 0.5);
line-height: 0.56rem;
height: 0.56rem;
padding: 0 0.24rem;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
margin: 0 0.04rem;
min-width: 1.74rem;
transition: 0.3s;
position: relative;
}
.page1 .btns .btn_wish::after {
border-radius: 0.07rem;
position: absolute;
left: -0.02rem;
top: -0.02rem;
pointer-events: none;
content: "";
width: 100%;
height: 100%;
border: 0.02rem solid rgba(180, 180, 180, 0.5);
-webkit-mask: linear-gradient(to right, #000 20.1%, #0000 20.1% 30%, #000 30.1%) no-repeat 0 0/100% 20%, linear-gradient(to right, #000, #000) no-repeat 0 100%/100% 90%;
mask: linear-gradient(to right, #000 20.1%, #0000 20.1% 30%, #000 30.1%) no-repeat 0 0/100% 20%, linear-gradient(to right, #000, #000) no-repeat 0 100%/100% 90%;
}
.page1 .btns .btn_wish i {
margin-right: 0.1rem;
}
.page1 .btns .btn_wish:hover {
background: #000000;
}
.page1 .btns .btn_wish:hover::after {
border: 0.02rem solid #b4b4b4;
}
.page1 .btns .icon_epic {
width: 0.23rem;
height: 0.27rem;
background: url(imgs/top_bar/icon_epic.png) no-repeat 50% 50%/0.23rem 0.27rem;
}
.page1 .btns .icon_steam {
width: 0.23rem;
height: 0.23rem;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAADr0lEQVRIiXTMMQ3AIAAAwWuCEkzUBUEoClCACxR0aTowMHRhI/x4w1/P9zoUkJBxIy4b6GgoqJjbAz8AAAD//8JleAwDA0MbAwODLC6bkcBdBgaGCqhFCMDAwAAAAAD//0I3nIeBgWEx1LWkguUMDAwpDAwM38AaGRgYAAAAAP//Qjacl4GBYQ8DA4MZGQbDwH4GBgYfsAUMDAwAAAAA//9iglnCwMCwhEiD/0PVBjMwMDgzMDDkMjAw3ITKOTIwMMwEsxgYGAAAAAD//4IZngCNPEIAFHGgIItnYGB4zcDAIM7AwLCRgYFBn4GBYT1UMyi+QhgYGBgAAAAA//8CBQsbAwPDQwYGBgkiDAdFciMDA8MmBgaGJ1AXBzEwMEyBWnKLgYFBEpyaGBhUAAAAAP//jNAxFUARAEDRO5oVEEUCdjVEoIskgjn/HwGsd3jD++IN6/FpQkHEvBawkTHQf6UeAAAA//8CBQuxKeMjAwPDIwYGBhMGBobtSOKgdH+KgYFBGSoPAQwM/gAAAAD//wIZbkWk4TlQ+goDA4M1kjgzAwODKdRgKbgoA4MNAAAA//8C5bgPDAwMMgQMXgtNISAwA5orQZF5A5oYFkF9AApiCGBgUAAAAAD//4KlczsGBoZMaPJiRTP4BQMDgw4DA8NbJDFQIgCFvTQDA8MBBgaGawwMDPMYGBhi4SoYGBgAAAAA//9Cz6Fi0FyWDo00kAsnMTAwHMTiG1De0IUmwwIGBgYjFFkGhj8AAAAA///CVbaAwpET6iNPBgaGWQwMDJeR5EWhLgXlRuyAgeEaAAAA//8CRag2NDkhg78MDAxfGBgYtjEwMExjYGBYCApDqAJ3BgaGSwQMZmBgYDgFAAAA//+CGf6UgYGhB5TwsSi6DrUgkIGBoZaBgWEHURmOgWEtAAAA//8CGQ7KbaCCphiaw0DZGBQksKIBBEBpGBShiUQYCgJ3GRgYtgMAAAD//4IV/nXQMARFEihTeTAwMHhDDRSAGg6qHBSJNLyCgYHhLwAAAP//Qo7QDaBcBWWDBEEp4A40ckHZHpRq+IgwGFSURDMwMDAAAAAA//9CNpwLWh5TUp6DkizI1z8YGBgYAAAAAP//Qg5XULiDymdQbiQHgFwMN5iBgYEBAAAA//9CNhwEQMkvlIGBIQqtEMIHQJEH0gMKCrjBDAwMDAAAAAD//yJU+4PSMigeLKHpnJ2BgeE3AwPDbQYGhpMMDAzroHnhH4ZuBgYGAAAAAP//AwDWZ5cpwVGXBgAAAABJRU5ErkJggg==) no-repeat 50% 50%/0.23rem 0.23rem;
}
.page1 .btns .icon_discord {
width: 0.28rem;
height: 0.26rem;
background-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 32 32%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Ccircle cx=%2715%27 cy=%2716%27 r=%2714%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27%3E%3C/circle%3E%3Cpath d=%27M22.012 9.515a15.768 15.768 0 0 0-3.994-1.255c-.172.311-.373.73-.512 1.062a14.666 14.666 0 0 0-4.427 0 11.354 11.354 0 0 0-.517-1.062c-1.403.243-2.744.67-3.998 1.258-2.527 3.82-3.213 7.545-2.87 11.217a15.969 15.969 0 0 0 4.899 2.51c.394-.542.746-1.12 1.049-1.727-.577-.22-1.13-.49-1.652-.805.138-.102.274-.21.405-.32 3.185 1.49 6.647 1.49 9.794 0 .133.11.268.218.405.32a10.29 10.29 0 0 1-1.655.806 12.13 12.13 0 0 0 1.05 1.728 15.937 15.937 0 0 0 4.9-2.512c.403-4.257-.686-7.947-2.877-11.22zm-9.936 8.962c-.956 0-1.74-.893-1.74-1.98s.767-1.981 1.74-1.981 1.757.892 1.74 1.981c.002 1.087-.767 1.98-1.74 1.98zm6.432 0c-.956 0-1.74-.893-1.74-1.98s.767-1.981 1.74-1.981 1.757.892 1.74 1.981c0 1.087-.767 1.98-1.74 1.98z%27 fill=%27%23fff%27 style=%27stroke-width:0;%27%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: cover;
}
@keyframes next {
0%,
50%,
100% {
transform: translateY(0);
}
25%,
75% {
transform: translateY(50%);
}
}
.scroll_tip {
position: absolute;
left: 50%;
bottom: 0.4rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transform: translateX(-50%);
filter: drop-shadow(0 0 0.05rem #1e9a9b);
}
.scroll_tip .icon_mouse {
width: 0.43rem;
height: 0.59rem;
position: relative;
margin-bottom: 0.3rem;
display: none;
}
.scroll_tip .txt {
display: block;
position: relative;
font-size: 0.14rem;
color: #d7ebeb;
}
.scroll_tip .txt::after {
width: 0.16rem;
height: 0.18rem;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAACKUlEQVQ4jWK8/vq1LQMDQwcDA8NKBgaGSQzEgxIGBoYAAAAAAP//YmFgYEhjYGCwgmI+BgaGFiLMaGVgYKhiYGBgAAAAAP//YmJgYJjAwMDwESrRzMDAUEdAcztMMwMDw3sAAAAA//8CGXCWgYHBDcmQRijGBjoZGBgqoBLvGBgYXAAAAAD//wIZAAKnQBwGBoYPUD7IFSDXIINuBgaGMqjAW7B6BoZzAAAAAP//ghkAAmeggu+h/BqoX0GgFxpoIPCagYHBmYGB4TwDAwMDAAAA//8CxQK6U40YGBh2MzAwCEH5pxkYGEzRNF8G8xgYGAAAAAD//0J2AQycg7oE5EwQgGl+xcDA4IismYGBgQEAAAD//8JmAAiAnAcy5A2U/xKq+SqKKgYGBgAAAAD//wKlA1zgAgMDgx0DA0MEAwPDIgYGhrsYChkYGAAAAAD//8IWBsQDBgYGAAAAAP//wuUF4gADAwMAAAD//6LMAAYGBgAAAAD//0I3gJuBgWEbAwMDKINhA04MDAyrGRgY2MCSDAwMAAAAAP//QjfgDwMDgxgDA8N2aAAiA1By38zAwCDFwMDwDyzBwMAAAAAA//9CN+AnNPquQw1xgIq7MzAwbIBGryfUIgYGBgYGAAAAAP//whYGoPwAMuQKAwPDVmiSBmkGZTqQ5k9wlQwMDAAAAAD//8IXjfwMDAw7GBgYLBgYGA4zMDB4MTAwfEFRwcDAAAAAAP//AwD6b0nVHxyWBQAAAABJRU5ErkJggg==) no-repeat 50% 50%/0.16rem 0.18rem;
content: "";
position: absolute;
left: 50%;
top: 0.2rem;
margin-left: -0.08rem;
animation: next 2s infinite ease-out;
}
.btn_top {
width: 0.7rem;
height: 0.7rem;
border-radius: 0.05rem;
background: rgba(0, 0, 0, 0.25) url(imgs/btn_top.png) no-repeat 50% 50%/0.42rem 0.44rem;
position: absolute;
right: 0.4rem;
bottom: 0.4rem;
transform: rotate(-45deg);
transition: 0.3s;
}
.btn_top:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.page2 {
background: url(imgs/bg2.jpg) no-repeat 50% 50% / cover;
}
.page2 .features_swiper {
width: 100%;
position: absolute;
top: 50%;
left: 0;
margin-top: -4.1rem;
height: 7.6rem;
}
.page2 .features_wrapper {
width: 100%;
height: 100%;
}
.page2 .feature {
width: 100%;
height: 100%;
}
.page2 .view {
width: 13.27rem;
height: 7.53rem;
position: absolute;
top: 0;
margin-left: -0.43rem;
-webkit-mask: url(imgs/f_mask.png) no-repeat 50% 50%/13.27rem 7.53rem;
mask: url(imgs/f_mask.png) no-repeat 50% 50%/13.27rem 7.53rem;
}
.page2 .view img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.page2 .con {
position: absolute;
left: 50%;
top: 50%;
margin-left: 3.5rem;
margin-top: -2.05rem;
width: 4.86rem;
}
.page2 .con .title {
background: url(imgs/line.png) no-repeat 0 100%/4.86rem 0.17rem;
font-size: 0.6rem;
padding: 0.3rem 0;
margin-bottom: 0.3rem;
}
.page2 .con .des {
font-size: 0.24rem;
line-height: 0.32rem;
color: #ffffff;
width: 5.2rem;
}
.page2 .features_prev {
width: 0.48rem;
height: 0.73rem;
background: url(imgs/icon_prev.png) no-repeat 50% 50%/0.48rem 0.73rem;
position: absolute;
top: 50%;
left: 0.2rem;
margin-top: -0.36rem;
z-index: 5;
cursor: pointer;
}
.page2 .features_next {
width: 0.48rem;
height: 0.73rem;
background: url(imgs/icon_next.png) no-repeat 50% 50%/0.48rem 0.73rem;
position: absolute;
top: 50%;
right: 0.2rem;
margin-top: -0.36rem;
z-index: 5;
cursor: pointer;
}
.page2 .swiper-button-disabled {
cursor: default;
opacity: 0.4;
}
.page2 .features_pager {
position: absolute;
top: 50%;
left: 1rem !important;
margin-top: 3.9rem;
display: flex;
}
.page2 .features_pager span {
width: 0.1rem;
height: 0.1rem;
outline: 0.02rem solid #a2b08f;
outline-offset: 0.02rem;
position: relative;
margin: 0 0.15rem !important;
transform: rotate(45deg);
display: inline-block;
border-radius: 0;
background: transparent;
opacity: 1;
}
.page2 .features_pager span.swiper-pagination-bullet-active {
opacity: 1;
background: #ffb619;
}
.page_news {
background: url(imgs/bg_news.jpg) no-repeat 50% 50% / cover;
}
.page_news .btn_news_more {
width: 1.52rem;
height: 0.44rem;
background: url(imgs/btn_more_box.png) no-repeat 0 0/1.52rem 0.44rem;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.2rem;
color: #dcf0ef;
position: absolute;
left: 50%;
top: 50%;
margin-left: 5.9rem;
margin-top: -4rem;
}
.page_news .btn_news_more i {
width: 0.11rem;
height: 0.16rem;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAQCAYAAADAvYV+AAABf0lEQVQokWK88+E9AxSoMjAwFEPxV5ggHDAwMAAAAAD//2JC4pgyMDCkMzAwbGNgYODGUMnAwAAAAAD//0JWDAN2UA1cKKIMDAwAAAAA//9CVvwXTcN2FA0MDAwAAAAA//9CVryDgYHhLE4bGBgYAAAAAP//Qlb8kYGBwRVNgz1cAwMDAwAAAP//gikGcTgYGBhAQQPScAlNw1YGBgYuAAAAAP//AgUdyOe3GRgYfjEwMKgwMDD8YWBgcGJgYNiL4jsGhn4AAAAA//+CmYweKv8xwoiBgQEAAAD//4JFCsgZ/xgYGH4wMDAIMjAw7GNgYDBAUneAgYHBGwAAAP//YoFyvkFpAQYGht1oCg+CFDIwMHwDAAAA//9Ctp6PgYFhDwMDgzGaQi+wYQwMDAAAAAD//0JW7Imm8BCyQgYGBgYAAAAA//9CVsyMphCkGa6QgYGBAQAAAP//wpY2MEwEAwYGBgAAAAD//0JWfJqBgWEuVCFmEmVgYAAAAAD//wMA2EUw+PGNDeQAAAAASUVORK5CYII=) no-repeat 0 0/0.11rem 0.16rem;
margin-left: 0.1rem;
}
.page_news .news_sec {
position: absolute;
left: 50%;
top: 50%;
margin-top: -3rem;
width: 15.22rem;
margin-left: -7.61rem;
display: flex;
align-items: center;
justify-content: space-around;
}
.page_news .news_sec .news_item {
width: 4.7rem;
height: 6.7rem;
background: url(imgs/news_box.png) no-repeat 0 0/4.7rem 6.7rem;
box-sizing: border-box;
padding-left: 0.05rem;
position: relative;
display: flex;
flex-direction: column;
transition: 0.5s;
}
.page_news .news_sec .news_item span {
display: block;
transition: 0.5s;
}
.page_news .news_sec .news_item .tag {
position: absolute;
left: 0.1rem;
top: -0.32rem;
line-height: 0.24rem;
font-size: 0.18rem;
color: #cfe6e7;
text-transform: uppercase;
}
.page_news .news_sec .news_item .view {
width: 4.65rem;
height: 2.6rem;
overflow: hidden;
-webkit-mask: url(imgs/news_view_mask.png) no-repeat 0 0/100% 100%;
mask: url(imgs/news_view_mask.png) no-repeat 0 0/100% 100%;
}
.page_news .news_sec .news_item .view img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: 0.5s;
}
.page_news .news_sec .news_item .title {
margin-top: 0.04rem;
height: 0.82rem;
display: flex;
align-items: center;
font-size: 0.26rem;
line-height: 0.34rem;
color: #fff;
padding: 0 0.4rem;
text-align: justify;
-webkit-hyphens: auto;
hyphens: auto;
}
.page_news .news_sec .news_item .title span {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
.page_news .news_sec .news_item .date {
font-size: 0.17rem;
color: #388c95;
padding: 0 0.4rem;
margin-bottom: 0.2rem;
}
.page_news .news_sec .news_item .summary {
padding: 0 0.4rem;
font-size: 0.17rem;
line-height: 0.3rem;
color: #91dce5;
transition: 1s;
-webkit-hyphens: auto;
hyphens: auto;
text-align: justify;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
.page_news .news_sec .news_item .more {
font-size: 0.24rem;
color: #459aaf;
line-height: 0.3rem;
position: absolute;
right: 0.4rem;
bottom: 0.32rem;
white-space: nowrap;
}
.page_news .news_sec .news_item:hover {
transform: translateY(-0.2rem);
}
.page_news .news_sec .news_item:hover .view img {
transform: scale(1.1);
}
.page_news .news_sec .news_item:hover .title span {
color: #a9eeff;
}
.page_news .news_sec .news_item:hover .summary {
color: #c1f8fe;
}
.page3 {
background: url(imgs/bg3.jpg) no-repeat 50% 50% / cover;
}
.page3 .page_title {
display: none;
}
.page3 .gl_container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.page3 .gl_container canvas {
width: 100%;
height: 100%;
pointer-events: none;
}
.page3 .page_title {
left: auto;
right: 0.6rem;
text-align: right;
padding-right: 0.5rem;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAASCAYAAAC0EpUuAAAB+0lEQVQ4jWL8d5CVgQAoZmBg+MDAwDCXgYEhioGBQYGBgaENpx4GBgYAAAAA//9iImBgCwMDQw8DA0MglA8ytJWBgaEfpw4GBgYAAAAA///CZyjIwGoccgU4DWZgYAAAAAD//8JlKD4D8RvMwMAAAAAA///CZig2A59A6etYDO5DEWFgYAAAAAD//0I3FJuBO6GaQQAktwFNvhDFYAYGBgAAAAD//0I2FJeBAQwMDD+g/F8MDAzheA1mYGAAAAAA//+CGdqExcDDSAZmQfmg5AUzeCtWgxkYGAAAAAD//2TSIQpAIQAE0edlbFZB8AT/3t9iM3kcEUy6cZhpu39a0C5hr+JHxEQ4PKMjYTwV3wIAAP//IpROsYE/eGUZGBgAAAAA//8CGXqcgYGhGYtcOwMDAwcDA8MtBgaGTKirQV48z8DAwAaVRwf9DAwM2wEAAAD//0LOpsREFAiADFwJFUcGIAOLGBgYGAAAAAD//0L2fg00CyIDd2hMg1xMlIEMDAwMAAAAAP//Qg9TXAZPgLJBcngNZGBgYAAAAAD//8IWUdgMloHSmmjiIMtQDGRgYGAAAAAA///CFfvYDEYHIANBEYcKGBgYAAAAAP//wpek8BmM00AGBgYGAAAAAP//YiHgGpDB76GFNAgsgyZB3L5gYGAAAAAA//8DAObkSXLJsU3aAAAAAElFTkSuQmCC) no-repeat 100% 50%/0.21rem 0.18rem;
}
.page3 .mechs {
width: 100%;
height: 100%;
display: block;
position: absolute;
inset: 0;
pointer-events: auto;
z-index: 1;
}
.page3 .info {
min-width: 5.4rem;
position: absolute;
left: 50%;
top: 50%;
margin-left: -9.25rem;
margin-top: -3.8rem;
opacity: 0;
pointer-events: none;
}
.page3 .info.show {
opacity: 1;
margin-left: -7.95rem;
pointer-events: all;
}
.page3 .info.show .title,
.page3 .info.show .des,
.page3 .info.show .video {
opacity: 1;
transform: none;
pointer-events: all;
z-index: 10;
}
.page3 .info .title {
background: url(imgs/line.png) no-repeat 0 100%/4.86rem 0.17rem;
font-size: 0.6rem;
padding: 0.3rem 0;
margin-bottom: 0.3rem;
opacity: 0;
transition: 0.5s;
transform: translateX(-2rem);
}
.page3 .info .des {
font-size: 0.24rem;
line-height: 0.32rem;
color: #ffffff;
width: 5.2rem;
margin-bottom: 0.2rem;
opacity: 0;
transition: 0.5s 0.2s;
transform: translateX(-2rem);
}
.page3 .info .video {
width: 5.41rem;
height: 3.06rem;
position: relative;
cursor: pointer;
-webkit-mask: url(imgs/video_mask.png) no-repeat 50% 50%/5.41rem 3.06rem;
mask: url(imgs/video_mask.png) no-repeat 50% 50%/5.41rem 3.06rem;
opacity: 0;
transition: 0.5s 0.3s;
transform: translateX(-2rem);
pointer-events: none;
}
.page3 .info .video.disabled {
cursor: default;
pointer-events: none;
}
.page3 .info .video.disabled::after {
display: none;
}
.page3 .info .video img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: 1s;
}
.page3 .info .video::after {
width: 0.79rem;
height: 0.79rem;
background: url(imgs/btn_play.png) no-repeat 50% 50%/0.79rem 0.79rem;
position: absolute;
left: 50%;
top: 50%;
margin-left: -0.4rem;
margin-top: -0.4rem;
content: "";
transition: 0.3s;
}
.page3 .info .video:hover img {
transform: scale(1.05);
}
.page3 .info .video:hover::after {
filter: drop-shadow(0 0 0.05rem #1e9a9b);
}
.page3 .mech {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.45s ease;
pointer-events: none;
}
.page3 .mech.show {
opacity: 1;
pointer-events: auto;
}
.page3 .mech .view {
position: absolute;
left: 50%;
top: 50%;
pointer-events: none;
}
.page3 .mech.show .view {
pointer-events: auto;
cursor: grab;
touch-action: none;
transform-origin: center center;
transform-style: preserve-3d;
will-change: transform;
transition: transform 0.12s ease-out;
}
.page3 .mech.show .view.dragging {
cursor: grabbing;
}
.page3 .mech1 .view {
width: 7.8rem;
height: 8.73rem;
background: url(imgs/haruman.png) no-repeat 50% 50%/7.8rem 8.73rem;
margin-left: 0.2rem;
margin-top: -4.08rem;
}
.page3 .mech1 .view::after {
width: 13.62rem;
height: 7.68rem;
background: url(imgs/light.png) no-repeat 50% 50%/13.62rem 7.68rem;
position: absolute;
left: -2.7rem;
top: -2.6rem;
mix-blend-mode: screen;
content: "";
}
.page3 .mech2 .view {
width: 5.37rem;
height: 9.04rem;
background: url(imgs/agni.png) no-repeat 50% 50%/5.37rem 9.04rem;
margin-left: 1.5rem;
margin-top: -4.48rem;
}
.page3 .mech3 .view {
width: 12.91rem;
height: 7.54rem;
background: url(imgs/yama.png) no-repeat 50% 50%/12.91rem 7.54rem;
margin-left: -4rem;
margin-top: -3.98rem;
-webkit-mask: linear-gradient(to right, #0000 10%, #000 33%);
mask: linear-gradient(to right, #0000 10%, #000 33%);
}
.page3 .mech_menu {
height: 5.8rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 1.24rem;
margin-left: -9.67rem;
margin-top: -2.85rem;
z-index: 20;
opacity: 0;
pointer-events: none;
}
.page3 .mech_menu.show {
animation: fadeInRight forwards 1s 0.5s;
pointer-events: all;
}
.page3 .mech_menu::before,
.page3 .mech_menu::after {
width: 0.06rem;
height: 0.67rem;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAABDCAYAAAC/WXSXAAADq0lEQVQ4jWLMX7aFAQqMGBgYfjEwMFxhYGBgAAAAAP//YoIKrmRgYDjLwMBwGcxmYGAAAAAA//8CSZgzMDCEwbSB2QwM5gAAAAD//wJJ/EMShAAGhn8AAAAA//8CSZxhYGDYhCS4iYGB4QwAAAD//2JhYGD4z8DAEMjAwOAMtfwwAwPDfwAAAAD//wJJgLUyMDDshuthYGAAAAAA//+CuQoVMDAwAAAAAP//wi7BwMAAAAAA///CLsHAwAAAAAD//8IuwcDAAAAAAP//wi7BwMAAAAAA//+CSegxMDCsYmBgWMLAwKDLwMDAAAAAAP//AjlXiIGB4SADA4MAVJE3AwODMgAAAP//AukwQxIEAQEGBgYzAAAAAP//AkkwY1jAwMAMAAAA///CbjkDAwMAAAD//8IuwcDAAAAAAP//wi7BwMAAAAAA///CLsHAwAAAAAD//8IuwcDAAAAAAP//wi7BwMAAAAAA///CLsHAwAAAAAD//8IuwcDAAAAAAP//wi7BwMAAAAAA///CLsHAwAAAAAD//8IuwcDAAAAAAP//wi7BwMAAAAAA///CLsHAwAAAAAD//8IuwcDAAAAAAP//wi7BwMAAAAAA///CLsHAwAAAAAD//8IuwcDAAAAAAP//wi7BwMAAAAAA///CLsHAwAAAAAD//8IuwcDAAAAAAP//wi7BwMAAAAAA///CLsHAwAAAAAD//8IuwcDAAAAAAP//wi7BwMAAAAAA///CLsHAwAAAAAD//8IuwcDAAAAAAP//wi7BwMAAAAAA///CLsHAwAAAAAD//8IuwcDAAAAAAP//wi7BwMAAAAAA///CLsHAwAAAAAD//8IuwcDAAAAAAP//wi7BwMAAAAAA///CLsHAwAAAAAD//8IuwcDAAAAAAP//wi7BwMAAAAAA//8CSXzDEGVg+AYAAAD//wJJHGVgYLiAJHiBgYHhCAAAAP//AhUAoMLLmoGBIQbKXsnAwPAbAAAA//+CFWQg42bB9TAwMAAAAAD//8JuOQMDAwAAAP//wi7BwMAAAAAA///CLsHAwAAAAAD//8IuwcDAAAAAAP//wi7BwMAAAAAA//+CSYBoVwYGBnswm4GBAQAAAP//AhGMDAwM6xkYGHYxMDAcALMZGBgBAAAA//8CSZgwMDD4IZnix8DAYAIAAAD//wJJYNrDwMAEAAAA//8CCZ6EFpQwsIqBgeEkAAAA//+CBUk4AwNDFzSsLjMwMDAAAAAA//8DAIPoK8V3IigBAAAAAElFTkSuQmCC) no-repeat 50% 50%/0.06rem 0.67rem;
content: "";
}
.page3 .mech_menu .item {
width: 0.98rem;
height: 0.98rem;
position: relative;
cursor: pointer;
margin: 0.1rem 0;
-webkit-mask: url(imgs/mesh_mask.png) no-repeat 50% 50%/0.98rem 0.98rem;
mask: url(imgs/mesh_mask.png) no-repeat 50% 50%/0.98rem 0.98rem;
transform: scale(0.8);
}
.page3 .mech_menu .item span {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
}
.page3 .mech_menu .item i {
position: absolute;
width: 0.03rem;
height: 0.03rem;
border: 0.03rem solid #febe05;
border-radius: 50%;
left: 0;
top: 0.45rem;
opacity: 0;
z-index: 2;
}
.page3 .mech_menu .item:hover span {
filter: brightness(0) invert(1);
}
.page3 .mech_menu .item:hover::before {
background: #267390;
}
.page3 .mech_menu .item::before {
width: 100%;
height: 100%;
position: absolute;
content: "";
top: 0;
left: 0;
background: #85b1c1;
transition: 0.5s;
}
.page3 .mech_menu .item::after {
background: #febe05;
width: 50%;
height: 50%;
transform: rotate(45deg);
position: absolute;
right: -0.7rem;
top: -0.7rem;
opacity: 0;
content: "";
transition: 0.5s;
}
.page3 .mech_menu .item.active i {
opacity: 1;
}
.page3 .mech_menu .item.active span {
filter: brightness(0) invert(1);
}
.page3 .mech_menu .item.active::before {
background: #267390;
-webkit-mask: conic-gradient(from 225deg at 13% 50%, #0000 0 25%, #000 25% 30%);
mask: conic-gradient(from 225deg at 13% 50%, #0000 0 25%, #000 25% 40%);
}
.page3 .mech_menu .item.active::after {
right: -0.3rem;
top: -0.3rem;
opacity: 0.7;
}
.page3 .mech_menu .item1 span {
background: url(imgs/g_thumb1.png) no-repeat 50% 50%/0.7rem 0.76rem;
}
.page3 .mech_menu .item2 span {
background: url(imgs/g_thumb2.png) no-repeat 50% 50%/0.82rem 0.8rem;
}
.page3 .mech_menu .item3 span {
background: url(imgs/g_thumb3.png) no-repeat 50% 50%/0.86rem 0.39rem;
}
.page4 {
height: 6.65rem !important;
background: url(imgs/bg4.jpg) no-repeat 50% 50% / cover;
box-sizing: border-box;
padding: 1rem 0 0.3rem;
}
.page4 .footer {
width: 13.25rem;
margin: 0 auto;
}
.page4 .head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.8rem;
}
.page4 .head .foot_title {
font-size: 0.5rem;
color: #32a3b0;
}
.page4 .head .btn_support {
min-width: 1.85rem;
height: 0.45rem;
margin-right: 0.34rem;
margin-left: 0.2rem;
font-size: 0.16rem;
color: #fff;
font-weight: 700;
text-transform: uppercase;
transition: 0.3s;
text-align: center;
position: relative;
display: none;
}
.page4 .head .btn_support span {
min-width: 1.85rem;
height: 0.45rem;
background: url(imgs/btn_sup.png) no-repeat 50% 50%/100% 100%;
display: block;
line-height: 0.46rem;
}
.page4 .head .btn_support::before,
.page4 .head .btn_support::after {
width: 0.03rem;
height: 0.03rem;
border: 0.03rem solid #ffbd54;
border-radius: 50%;
content: "";
position: absolute;
top: 0.185rem;
}
.page4 .head .btn_support::before {
left: -0.06rem;
}
.page4 .head .btn_support::after {
right: -0.06rem;
}
.page4 .head .btn_support:hover {
filter: brightness(1.1);
}
.page4 .sns_sec {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABS0AAAAECAYAAABr7homAAABHklEQVR4nOzQoQ3CAAAAwWMNJCGpZBdMd2ADgm46S001w3QNJAmetBv82Xd/Oj+mC1ZcMWOyb8CC20FPkiRJkiRJkn9fvDHic3DnhSc23H8AAAD//+zYoQ3CAABE0RdIcJgqJiBdAA8h6X7VnYE5ugzsgKmsqf/Pf3PyztfHe8aEC17bMfndCRc8mzxJkiRJkiTJASfc8cO60434bP/kDcMfAAD//+zYMQEAAAjDsIF/0bPAxZVI6NlVFwAAAAB4cHuRyRQAAP//7NuxDcJQEETBIXQ9hGQuxwW4AvqhFYgoBguhLzk0kgt4E2922ep2fFq+MGPCHY8/4Sdue9t56YpJkiRJkiRJTvju8/AVn4P8WH1vuOKN5QcAAP//AwCRlhqn9oFzwAAAAABJRU5ErkJggg==) no-repeat 50% 100%/13.25rem 0.04rem;
padding-bottom: 0.74rem;
margin-bottom: 0.6rem;
display: flex;
justify-content: space-around;
align-items: center;
}
.page4 .sns_sec a {
display: block;
width: 1.4rem;
white-space: nowrap;
text-align: center;
font-size: 0.18rem;
color: #81adbd;
text-transform: uppercase;
}
.page4 .sns_sec a i {
width: 0.8rem;
height: 0.8rem;
margin-bottom: 0.08rem;
display: block;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s;
margin: 0 auto 0.1rem;
position: relative;
}
.page4 .sns_sec a i img {
width: 80%;
transition: 0.3s;
}
.page4 .sns_sec a i::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: 0.3s;
background: url(imgs/circle.png) no-repeat 50% 50%/100% 100%;
}
.page4 .sns_sec a:hover i img {
transform: scale(1.05);
}
.page4 .sns_sec a:hover i::before {
transform: rotate(180deg);
}
.page4 .links {
display: flex;
justify-content: center;
align-items: center;
color: #1e5b73;
font-size: 0.3rem;
line-height: 1;
margin-bottom: 0.1rem;
}
.page4 .links a {
font-size: 0.22rem;
color: #1e5b73;
padding: 0 0.35rem;
text-align: center;
}
.page4 .links a:focus-visible {
outline: none;
border: none;
}
.page4 .links a:hover {
color: #81adbd;
text-decoration: underline;
}
.page4 .copyright {
text-align: center;
color: #3e5260;
font-size: 0.22rem;
}
.pop {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 999;
display: none;
}
.pop_mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 5;
cursor: pointer;
}
.pop_con {
position: absolute;
z-index: 10;
left: 50%;
top: 50%;
box-sizing: border-box;
width: 7.74rem;
height: 5.27rem;
background: url(imgs/pop.png) no-repeat 50% 50%/7.74rem 5.27rem;
margin-left: -3.87rem;
margin-top: -2.635rem;
padding: 0.4rem 0 0;
display: flex;
flex-direction: column;
}
.pop_title {
font-size: 0.38rem;
line-height: 0.4rem;
flex: 0 0 0.4rem;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-weight: 700;
}
.pop_title span {
background: linear-gradient(to bottom, #fff 10%, #b8d6d6 90%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.pop_title::before,
.pop_title::after {
width: 0.57rem;
height: 0.04rem;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAAECAYAAAA0/Jf2AAAAy0lEQVQokbzNoQ2AMAAAwWMV0gTJLpjO0lSTzoJBs0tZobKShAWo5eyLn2prM04EFOy+LTiwDvpfHlyI6INpRsKN7QUAAP//AnlyEQMDQyxU8j8DA4MWAwPDDSwaQQEROMAeRAbFDAwMfVjENRgYGK4xMDAwgnkMDIsBAAAA//9iGhj3UQUQ53YGBkYAAAAA//8CKWxgYGC4zMDA8ImBgaEWRyyCACj6z0NjeyDBPwYGhu0MDAzTcTgC5H6QPz6C3cvAUA8AAAD//wMAQ2Mf+cg9SDoAAAAASUVORK5CYII=) no-repeat 50% 50%/0.57rem 0.04rem;
content: "";
margin: 0.04rem 0.2rem 0;
}
.pop_main {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
color: #9dc3ce;
font-size: 0.24rem;
}
.pop_foot {
flex: 0 0 0.4rem;
height: 0.4rem;
display: flex;
justify-content: flex-end;
padding-right: 0.4rem;
margin-bottom: 0.36rem;
}
.pop_foot .btn {
line-height: 0.4rem;
text-align: center;
color: #c8cdcf;
font-size: 0.2rem;
min-width: 1.3rem;
padding: 0 0.2rem;
border-radius: 0.1rem;
background: #5d7076;
}
.pop_close {
position: absolute;
right: -0.1rem;
top: 0;
z-index: 20;
cursor: pointer;
width: 0.42rem;
height: 0.42rem;
background: url(imgs/pop_close.png) no-repeat 50% 50%/0.42rem 0.42rem;
right: 0.4rem;
top: 0.4rem;
}
.pop .input_sec {
display: flex;
justify-content: center;
align-items: center;
}
.pop .input_sec .input_box {
width: 3.99rem;
height: 0.57rem;
background: url("data:image/svg+xml,") no-repeat 0 0/100% 100%;
box-sizing: border-box;
padding: 0 0.1rem;
display: flex;
justify-content: center;
align-items: center;
}
.pop .input_sec .input_box.yellow {
background: url("data:image/svg+xml,") no-repeat 0 0/100% 100%;
}
.pop .input_sec input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
outline: none;
text-align: center;
font-size: 0.26rem;
color: #fff;
background: none;
height: 0.5rem;
line-height: 0.5rem;
}
.pop .input_sec input:-internal-autofill-previewed,
.pop .input_sec input:-internal-autofill-selected {
-webkit-text-fill-color: #ffffff;
transition: background-color 5000s ease-out 0.5s;
}
.pop .input_sec input:-webkit-autofill {
-webkit-text-fill-color: #ffffff !important;
caret-color: white;
-webkit-transition: background-color 0s linear 3600s;
transition: background-color 0s linear 3600s;
}
.pop .input_sec input:-internal-autofill-selected {
background-color: transparent !important;
color: #fff !important;
}
.pop .input_sec input::-moz-placeholder {
color: #29687e;
font-size: 0.18rem;
display: flex;
justify-content: center;
align-items: center;
padding: 0.05rem 0;
vertical-align: middle;
box-sizing: border-box;
margin-bottom: 0.15rem;
font-family: sans-serif;
}
.pop .input_sec input::placeholder {
color: #29687e;
font-size: 0.18rem;
display: flex;
justify-content: center;
align-items: center;
padding: 0.05rem 0;
vertical-align: middle;
box-sizing: border-box;
margin-bottom: 0.15rem;
font-family: sans-serif;
}
.pop .input_sec .btn {
position: relative;
}
.pop .input_sec .btn span {
display: flex;
justify-content: center;
align-items: center;
font-size: 0.22rem;
height: 0.56rem;
color: #000000;
line-height: 1.1;
min-width: 1.5rem;
max-width: 2.6rem;
text-align: center;
padding: 0 0.2rem;
border-radius: 0.06rem;
background: url(imgs/pop_btn1.png) no-repeat 50% 50% / auto 0.54rem;
-webkit-mask: url(imgs/pop_btn_mask.png) no-repeat 0 50% / auto 100%, url(imgs/pop_btn_mask.png) no-repeat 100% 50% / auto 100%;
mask: url(imgs/pop_btn_mask.png) no-repeat 0 50% / auto 100%, url(imgs/pop_btn_mask.png) no-repeat 100% 50% / auto 100%;
}
.pop .input_sec .btn.btn_blue span {
color: #ecfaff;
background: url(imgs/pop_btn2.png) no-repeat 50% 50% / auto 0.54rem;
}
.pop .input_sec .btn.btn_blue::before,
.pop .input_sec .btn.btn_blue::after {
background: #2ba1b1;
}
.pop .input_sec .btn::before,
.pop .input_sec .btn::after {
width: 0.1rem;
height: 0.1rem;
border-radius: 50%;
background: #feca07;
content: "";
position: absolute;
top: 50%;
margin-top: -0.05rem;
left: -0.06rem;
}
.pop .input_sec .btn::after {
left: auto;
right: -0.06rem;
}
.pop .checkbox_sec {
position: relative;
padding-left: 0.15rem;
display: block;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
font-size: 0.18rem;
padding-left: 0.2rem;
color: #82b4c7;
width: 5.3rem;
margin: 0 auto;
cursor: pointer;
}
.pop .checkbox_sec input {
display: none;
}
.pop .checkbox_sec .hl {
color: #dcf6ff;
}
.pop .checkbox_sec .checkmark {
width: 0.08rem;
height: 0.08rem;
background: transparent;
overflow: hidden;
outline: 0.03rem solid #1a6b86;
outline-offset: 0.02rem;
position: absolute;
left: -0.08rem;
top: 0.08rem;
transform: rotate(45deg);
}
.pop .checkbox_sec input:checked ~ .checkmark {
background: #ffb619;
}
.pop .checkbox_sec a {
text-decoration: underline;
color: #dbab66;
}
.pop .subscribe_prize {
background: url(imgs/pop_prizes.png) no-repeat 50% 50%/5.36rem 1.39rem;
width: 5.36rem;
height: 1.39rem;
box-sizing: border-box;
padding: 0.12rem 0.2rem;
display: flex;
justify-content: space-evenly;
align-items: center;
position: relative;
margin-top: 0.5rem;
}
.pop .subscribe_prize .title {
position: absolute;
font-size: 0.18rem;
line-height: 1.2;
word-break: break-all;
color: #3dadba;
text-align: center;
left: 0;
width: 100%;
padding-bottom: 0.14rem;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJEAAAALCAYAAAB/JW8GAAACKUlEQVRYhWI07J3DMApwgmQGBoYCBgaGwwwMDPkMDAy/R4MKDTAwMAAAAAD//2IZVK4ZXECIgYFhJgMDAzMDA4MOAwPDIQYGhhUjPVAwAAMDAwAAAP//AiUicwYGhrkMDAycg8xt9AJ/GRgYTkJLnLdIdn5jYGD4ysDAwAflP0NzDxMDA0M1AwND+IgOOwaGfgAAAAD//wIlIj0GBgbtQeCggQSqDAwMBgwMDC4MDAwvoe74wcDA4MTAwBDHwMBwDFoSwQAzNOPFj7iQQgcMDPYAAAAA//8CJaI50JzIOrjcRjcgwsDAsBBaZe1nYGBwZmBgeA61/CwUIwNQAlrEwMAQBc2JoLbSieEdRHgAA8NVAAAAAP//AiWi/wwMDJcGrRPpAxwYGBj2MTAwaDIwMByAlkBPsdgMymhLGRgYQqEJCFRKLRuOAUI0YGBgAAAAAP//Yhoi7qQ1uAFNSE8YGBjUoFWXPJqdbAwMDCuhCQjUS4sYTUAMDAwMDAwAAAAA//8aTUQIcAtUvzMwMDxkYGBQgpZI5lBZCQYGhg0MDAyBDAwMvxgYGMIYGBjWDAZHDzhgYGAAAAAA//8a7eKjgnvQhLQPmpBOQHtoHNC20A9oSbRlMDl6QAEDAwMAAAD//xotiTABqCSygLZ9QKUONzQBHWVgYLAbTUBogIGBAQAAAP//Gi2JsIPXDAwMMQwMDBkMDAzSDAwM76BiowAdMDAwAAAAAP//AwB71kIGTXRdAgAAAABJRU5ErkJggg==) no-repeat 50% 100%/1.45rem 0.11rem;
top: -0.45rem;
}
.pop .subscribe_prize .item {
width: 1.14rem;
text-align: center;
}
.pop .subscribe_prize .item .icon {
width: 0.85rem;
height: 0.85rem;
margin: 0 auto;
}
.pop .subscribe_prize .item .name {
color: #3dadba;
font-size: 0.15rem;
height: 0.3rem;
line-height: 1.1;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.pop .note {
text-align: center;
padding: 0 0.4rem;
}
.pop .msg_con {
text-align: center;
padding: 0 0.4rem;
}
.pop_subscribe .note {
font-size: 0.2rem;
}
.pop_subscribe_res .pop_main {
padding: 0.1rem 0;
}
.pop_subscribe_res .note {
font-size: 0.22rem;
}
.pop_subscribe_res .discord_note {
font-size: 0.2rem;
display: flex;
justify-content: center;
align-items: center;
padding: 0 0.4rem;
text-decoration: underline;
text-underline-offset: 0.05rem;
}
.pop_subscribe_res .discord_note span {
flex-shrink: 0;
display: block;
width: 0.3rem;
height: 0.3rem;
background-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 32 32%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Ccircle cx=%2715%27 cy=%2716%27 r=%2714%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27%3E%3C/circle%3E%3Cpath d=%27M22.012 9.515a15.768 15.768 0 0 0-3.994-1.255c-.172.311-.373.73-.512 1.062a14.666 14.666 0 0 0-4.427 0 11.354 11.354 0 0 0-.517-1.062c-1.403.243-2.744.67-3.998 1.258-2.527 3.82-3.213 7.545-2.87 11.217a15.969 15.969 0 0 0 4.899 2.51c.394-.542.746-1.12 1.049-1.727-.577-.22-1.13-.49-1.652-.805.138-.102.274-.21.405-.32 3.185 1.49 6.647 1.49 9.794 0 .133.11.268.218.405.32a10.29 10.29 0 0 1-1.655.806 12.13 12.13 0 0 0 1.05 1.728 15.937 15.937 0 0 0 4.9-2.512c.403-4.257-.686-7.947-2.877-11.22zm-9.936 8.962c-.956 0-1.74-.893-1.74-1.98s.767-1.981 1.74-1.981 1.757.892 1.74 1.981c.002 1.087-.767 1.98-1.74 1.98zm6.432 0c-.956 0-1.74-.893-1.74-1.98s.767-1.981 1.74-1.981 1.757.892 1.74 1.981c0 1.087-.767 1.98-1.74 1.98z%27 fill=%27%23fff%27 style=%27stroke-width:0;%27%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: cover;
margin-right: 0.1rem;
}
.pop_subscribe_res .discord_note:hover {
color: #45c0da;
text-decoration: underline;
}
.pop_subscribe_res .discord_note:hover span {
background-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 32 32%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Ccircle cx=%2715%27 cy=%2716%27 r=%2714%27 fill=%27none%27 stroke=%27%2345c0da%27 stroke-width=%272%27%3E%3C/circle%3E%3Cpath d=%27M22.012 9.515a15.768 15.768 0 0 0-3.994-1.255c-.172.311-.373.73-.512 1.062a14.666 14.666 0 0 0-4.427 0 11.354 11.354 0 0 0-.517-1.062c-1.403.243-2.744.67-3.998 1.258-2.527 3.82-3.213 7.545-2.87 11.217a15.969 15.969 0 0 0 4.899 2.51c.394-.542.746-1.12 1.049-1.727-.577-.22-1.13-.49-1.652-.805.138-.102.274-.21.405-.32 3.185 1.49 6.647 1.49 9.794 0 .133.11.268.218.405.32a10.29 10.29 0 0 1-1.655.806 12.13 12.13 0 0 0 1.05 1.728 15.937 15.937 0 0 0 4.9-2.512c.403-4.257-.686-7.947-2.877-11.22zm-9.936 8.962c-.956 0-1.74-.893-1.74-1.98s.767-1.981 1.74-1.981 1.757.892 1.74 1.981c.002 1.087-.767 1.98-1.74 1.98zm6.432 0c-.956 0-1.74-.893-1.74-1.98s.767-1.981 1.74-1.981 1.757.892 1.74 1.981c0 1.087-.767 1.98-1.74 1.98z%27 fill=%27%2345c0da%27 style=%27stroke-width:0;%27%3E%3C/path%3E%3C/svg%3E");
}
.pop_un_subscribe .pop_main {
justify-content: center;
}
.pop_un_subscribe .input_sec {
margin-bottom: 0.2rem;
}
.pop_video .pop_con {
width: 13.5rem;
height: 7.6rem;
background: #000;
margin-left: -6.75rem;
margin-top: -3.8rem;
border-radius: 0.2rem;
padding: 0;
}
.pop_video .pop_con::after {
width: 13.54rem;
height: 7.63rem;
background: url(imgs/pop_border.png) no-repeat 50% 50%/13.54rem 7.63rem;
position: absolute;
left: -0.02rem;
top: -0.02rem;
content: "";
pointer-events: none;
}
.pop_video .pop_con .pop_media_con,
.pop_video .pop_con .video,
.pop_video .pop_con iframe {
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 0.2rem;
}
.pop_video .pop_close {
width: 0.65rem;
height: 0.65rem;
right: -0.3rem;
top: -0.3rem;
transition: 0.3s;
background: url(imgs/pop_close2.png) no-repeat 50% 50%/100% 100%;
}
.pop_video .pop_close:hover {
transform: scale(1.05);
}
.pop_share .pop_con {
padding: 0;
width: 8.6rem;
height: 7rem;
margin-left: -4.3rem;
margin-top: -3.5rem;
background: none;
}
.pop_share .view {
width: 8.49rem;
height: 4.93rem;
background: url(imgs/share/share_view.jpg) no-repeat 50% 50%/8.49rem 4.93rem;
border-radius: 0.2rem;
position: relative;
margin: 0 auto 0.05rem;
}
.pop_share .view::after {
width: 8.54rem;
height: 4.96rem;
background: url(imgs/share/copy_border.png) no-repeat 50% 50%/8.54rem 4.96rem;
position: absolute;
left: 50%;
top: 50%;
content: "";
transform: translate(-50%, -50%);
}
.pop_share .copy_list .copy_item {
display: flex;
align-items: center;
justify-content: center;
margin: 0.15rem -0.1rem 0;
}
.pop_share .copy_list .copy_item i {
width: 0.53rem;
height: 0.53rem;
display: block;
}
.pop_share .copy_list .copy_item .ico_logo {
background: url(imgs/share/copy_logo.png) no-repeat 50% 50% / auto 100%;
}
.pop_share .copy_list .copy_item .ico_steam {
background: url(imgs/share/copy_steam.png) no-repeat 50% 50% / auto 100%;
}
.pop_share .copy_list .copy_item .ico_epic {
background: url(imgs/share/copy_epic.png) no-repeat 50% 50% / auto 100%;
}
.pop_share .copy_list .copy_item .input {
width: 6.69rem;
height: 0.53rem;
background: url(imgs/share/copy_input.png) no-repeat 50% 50%/6.69rem 0.53rem;
display: flex;
justify-content: center;
align-items: center;
}
.pop_share .copy_list .copy_item .input input {
width: 100%;
box-sizing: border-box;
border: none;
background: none;
outline: none;
text-align: left;
font-size: 0.2rem;
color: #dcf0f0;
padding: 0 0.3rem;
}
.pop_share .copy_list .copy_item .btn {
width: 1.46rem;
height: 0.51rem;
background: url(imgs/share/copy_btn.png) no-repeat 50% 50%/1.46rem 0.51rem;
text-align: center;
line-height: 0.51rem;
color: #dcf0f0;
font-size: 0.24rem;
font-weight: 400;
}
.pop_share .copy_list .copy_item .btn:hover {
color: #000;
background: url(imgs/share/copy_hover.png) no-repeat 50% 50%/1.46rem 0.51rem;
}
.pop_share .pop_close {
width: 0.65rem;
height: 0.65rem;
right: -0.3rem;
top: -0.3rem;
transition: 0.3s;
background: url(imgs/pop_close2.png) no-repeat 50% 50%/100% 100%;
}
.pop_share .pop_close:hover {
transform: scale(1.05);
}
.loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
display: none;
pointer-events: none;
}
.loading .loaders {
width: 0.91rem;
height: 0.91rem;
left: 50%;
position: absolute;
top: 50%;
margin-left: -0.455rem;
margin-top: -0.455rem;
display: flex;
flex-wrap: wrap;
}
.loading .loaders .loader {
width: 50%;
height: 50%;
background: url(imgs/loader.png) no-repeat 0 0/0.91rem 0.91rem;
opacity: 0.2;
animation: loader forwards 5s infinite;
}
.loading .loaders .loader1 {
background-position: 0 0;
animation-delay: 0.5s;
}
.loading .loaders .loader2 {
background-position: 100% 0;
animation-delay: 1s;
}
.loading .loaders .loader3 {
background-position: 0 100%;
animation-delay: 2s;
}
.loading .loaders .loader4 {
background-position: 100% 100%;
animation-delay: 1.5s;
}
@keyframes loader {
10%,
60% {
opacity: 1;
}
70%,
100% {
opacity: 0.2;
}
}
.rotate {
width: 1.37rem;
height: 0.59rem;
background: url(imgs/rotate.png) no-repeat 50% 50%/1.37rem 0.59rem;
position: absolute;
left: 50%;
bottom: 1rem;
margin-left: 3rem;
z-index: 20;
opacity: 0;
}
.rotate.show {
animation: rotateTip 10s forwards;
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: none;
}
}
@keyframes rotateTip {
30%,
50%,
70%,
90%,
100% {
opacity: 0;
}
40%,
60%,
80% {
opacity: 1;
}
}
.mobile_notice {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.6rem;
text-align: center;
z-index: 1200;
background: url(imgs/bg1.jpg) no-repeat 50% 50% / cover;
display: none;
}
.mobile_notice span {
padding: 0.3rem;
border-radius: 0.2rem;
background: rgba(0, 0, 0, 0.8);
line-height: 1.4;
}
.showReport *[data-report] {
background: #f00;
position: relative;
}
.showReport *[data-report]::after {
content: attr(data-report);
position: absolute;
top: 0;
left: 0;
color: #fff;
font-size: 0.16rem;
}