body,
dl,
dd,
ul,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
p,
form {
    margin: 0
}

body,
button,
input,
select,
textarea {
    font: 12px/1.5 tahoma, '\5b8b\4f53', sans-serif
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%
}

em,
b {
    font-style: normal
}

a {
    text-decoration: none;
    outline: 0;
    cursor: url('../images/event/Heros-Crown/cursor1.png'), pointer
}

a:hover {
    text-decoration: none
}

img {
    border: 0
}

button,
input,
select,
textarea {
    font-size: 100%;
    outline: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td,
th,
ul,
ol {
    padding: 0
}

ol,
ul {
    list-style: none
}

html {
    background: #131313
}

a:focus,
input:focus,
p:focus,
div:focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

body {
    font-size: 12px;
    -webkit-text-size-adjust: none;
    font-family: "all";
    min-width: 320px;
    overflow-x: hidden;
    -webkit-text-size-adjust: none;
    width: 100vw;
    cursor: url('../images/event/Heros-Crown/cursor.png'), auto
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0
}



@font-face {
    font-family: "vi";
    src: url('../fonts/vi.ttf')
}



.ar p,
.ar span,
.ar,
.ar input,
.ar select,
.ur p,
.ur span,
.ur,
.ur input,
.ur select {
    direction: rtl;
    font-family: 'ar', tahoma, '\5b8b\4f53', sans-serif
}

.ru p,
.ru span,
.ru,
.ru input,
.ru select {
    font-family: 'ru'
}

.th p,
.th span,
.th,
.th input,
.th select {
    font-family: 'th'
}

.TW,
.TW input,
.TW select,
.HK,
.HK input,
.HK select {
    font-family: "Noto Sans TC", Arial, Helvetica, sans-serif
}

.ZH,
.ZH input,
.ZH select {
    font-family: "Noto Sans SC", Arial, Helvetica, sans-serif
}

.tr p,
.tr span,
.tr,
.tr input,
.tr select {
    font-family: 'tr'
}

.vi p,
.vi span,
.vi,
.vi input,
.vi select {
    font-family: 'vi'
}

.uz p,
.uz span,
.uz,
.uz input,
.uz select {
    font-family: 'uz'
}

.wrapper {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url(../images/event/Heros-Crown/bg1.jpg) 0 0 / 100% calc(2100/1920*100vw) no-repeat, url(../images/event/Heros-Crown/bg2.jpg) 0 calc(2100/1920*100vw) / 100% calc(2785/1920*100vw) no-repeat
}

.section {
    width: 100%;
    overflow: hidden;
    position: relative
}

.kv {
    height: calc(1050/1920*100vw)
}

.s1 {
    height: calc(840/1920*100vw)
}

.s2 {
    height: calc(820/1920*100vw)
}

.s3 {
    height: calc(1120 / 1920 * 100vw);
}

.s4 {
    height: calc(1054/1920*100vw)
}

.side {
    display: block;
    width: calc(126/1920*100vw);
    height: calc(434/1920*100vw);
    background: url(../images/event/Heros-Crown/side.png) 0 0 / 100% 100% no-repeat;
    position: fixed;
    top: 54%;
    left: 0;
    margin-top: calc(-217/1920*100vw);
    z-index: 9;
    opacity: 0;
    pointer-events: none
}

.side.act {
    opacity: 1;
    pointer-events: auto;
    -webkit-transition: opacity .5s;
    transition: opacity .5s
}

.side a {
    display: block;
    width: calc(94/1920*100vw);
    height: calc(86/1920*100vw);
    background-image: url(../images/event/Heros-Crown/side1.png);
    background-size: calc(149/1920*100vw) calc(431/1920*100vw);
    background-position: 0 0;
    position: absolute;
    top: calc(8/1920*100vw);
    left: calc(14/1920*100vw)
}

.side a:nth-child(3) {
    background-position: right calc(-110/1920*100vw);
    top: calc(118/1920*100vw);
    left: calc(70/1920*100vw)
}

.side a:nth-child(4) {
    background-position: right calc(-232/1920*100vw);
    top: calc(240/1920*100vw);
    left: calc(70/1920*100vw)
}

.side a:nth-child(5) {
    background-position: 0 bottom;
    top: calc(354/1920*100vw);
    left: calc(14/1920*100vw)
}

.side a.act {
    background-image: url(../images/event/Heros-Crown/side2.png)
}

.side a:first-child {
    display: none !important
}

.btn_top {
    display: block;
    width: calc(128/1920*100vw);
    height: calc(128/1920*100vw);
    background: url(../images/event/Heros-Crown/btn_top.png) 0 0 / 100% 100% no-repeat;
    position: absolute;
    bottom: calc(180/1920*100vw);
    right: calc(84/1920*100vw)
}

.slogan {
    display: block;
    width: 100%;
    height: calc(200/1920*100vw);
    background: url(../images/event/Heros-Crown/slogan/en.png) center 0 / auto 100% no-repeat;
    position: absolute;
    top: calc(560/1920*100vw);
    left: 0;
    text-indent: -9999px
}

.ar .slogan {
    background: url(../images/event/Heros-Crown/slogan/ar.png) center 0/auto 100% no-repeat
}

.de .slogan {
    background: url(../images/event/Heros-Crown/slogan/de.png) center 0/auto 100% no-repeat
}

.en .slogan {
    background: url(../images/event/Heros-Crown/slogan/en.png) center 0/auto 100% no-repeat
}

.es .slogan {
    background: url(../images/event/Heros-Crown/slogan/es.png) center 0/auto 100% no-repeat
}

.fr .slogan {
    background: url(../images/event/Heros-Crown/slogan/fr.png) center 0/auto 100% no-repeat
}

.HK .slogan {
    background: url(../images/event/Heros-Crown/slogan/hk.png) center 0/auto 100% no-repeat
}

.id .slogan {
    background: url(../images/event/Heros-Crown/slogan/id.png) center 0/auto 100% no-repeat
}

.my .slogan {
    background: url(../images/event/Heros-Crown/slogan/my.png) center 0/auto 100% no-repeat
}

.pt .slogan {
    background: url(../images/event/Heros-Crown/slogan/pt.png) center 0/auto 100% no-repeat
}

.ru .slogan {
    background: url(../images/event/Heros-Crown/slogan/ru.png) center 0/auto 100% no-repeat
}

.th .slogan {
    background: url(../images/event/Heros-Crown/slogan/th.png) center 0/auto 100% no-repeat
}

.tr .slogan {
    background: url(../images/event/Heros-Crown/slogan/tr.png) center 0/auto 100% no-repeat
}

.TW .slogan {
    background: url(../images/event/Heros-Crown/slogan/tw.png) center 0/auto 100% no-repeat
}

.ur .slogan {
    background: url(../images/event/Heros-Crown/slogan/ur.png) center 0/auto 100% no-repeat
}

.uz .slogan {
    background: url(../images/event/Heros-Crown/slogan/uz.png) center 0/auto 100% no-repeat
}

.vi .slogan {
    background: url(../images/event/Heros-Crown/slogan/vi.png) center 0/auto 100% no-repeat
}

.slogan a {
    display: block;
    width: calc(114/1920*100vw);
    height: calc(114/1920*100vw);
    background: url(../images/event/Heros-Crown/btn_play.png) 0 0 / 100% 100% no-repeat;
    position: absolute;
    top: calc(-74/1920*100vw);
    left: 50%;
    margin-left: calc(-57/1920*100vw);
    -webkit-animation: aniplay 2s infinite linear;
    animation: aniplay 2s infinite linear
}

.newdownload-wrap {
    bottom: initial !important;
    top: calc(740/1920*100vw) !important
}

.tit1 {
    display: block;
    width: 100%;
    height: calc(76/1920*100vw);
    background: url(../images/event/Heros-Crown/tit1/en.png) center 0 / auto 100% no-repeat;
    margin: calc(30/1920*100vw) auto calc(10/1920*100vw)
}

.ar .tit1 {
    background: url(../images/event/Heros-Crown/tit1/ar.png) center 0/auto 100% no-repeat
}

.de .tit1 {
    background: url(../images/event/Heros-Crown/tit1/de.png) center 0/auto 100% no-repeat
}

.en .tit1 {
    background: url(../images/event/Heros-Crown/tit1/en.png) center 0/auto 100% no-repeat
}

.es .tit1 {
    background: url(../images/event/Heros-Crown/tit1/es.png) center 0/auto 100% no-repeat
}

.fr .tit1 {
    background: url(../images/event/Heros-Crown/tit1/fr.png) center 0/auto 100% no-repeat
}

.HK .tit1 {
    background: url(../images/event/Heros-Crown/tit1/hk.png) center 0/auto 100% no-repeat
}

.id .tit1 {
    background: url(../images/event/Heros-Crown/tit1/id.png) center 0/auto 100% no-repeat
}

.my .tit1 {
    background: url(../images/event/Heros-Crown/tit1/my.png) center 0/auto 100% no-repeat
}

.pt .tit1 {
    background: url(../images/event/Heros-Crown/tit1/pt.png) center 0/auto 100% no-repeat
}

.ru .tit1 {
    background: url(../images/event/Heros-Crown/tit1/ru.png) center 0/auto 100% no-repeat
}

.th .tit1 {
    background: url(../images/event/Heros-Crown/tit1/th.png) center 0/auto 100% no-repeat
}

.tr .tit1 {
    background: url(../images/event/Heros-Crown/tit1/tr.png) center 0/auto 100% no-repeat
}

.TW .tit1 {
    background: url(../images/event/Heros-Crown/tit1/tw.png) center 0/auto 100% no-repeat
}

.ur .tit1 {
    background: url(../images/event/Heros-Crown/tit1/ur.png) center 0/auto 100% no-repeat
}

.uz .tit1 {
    background: url(../images/event/Heros-Crown/tit1/uz.png) center 0/auto 100% no-repeat
}

.vi .tit1 {
    background: url(../images/event/Heros-Crown/tit1/vi.png) center 0/auto 100% no-repeat
}

.s1_swiper {
    display: block;
    width: calc(1357/1920*100vw);
    height: calc(600/1920*100vw);
    position: relative;
    margin: 0 auto
}

.s1_slide1 {
    background: url(../images/event/Heros-Crown/s1_slide1/en.png) 0 0 / 100% 100% no-repeat
}

.ar .s1_slide1 {
    background: url(../images/event/Heros-Crown/s1_slide1/ar.png) center 0/auto 100% no-repeat
}

.de .s1_slide1 {
    background: url(../images/event/Heros-Crown/s1_slide1/de.png) center 0/auto 100% no-repeat
}

.en .s1_slide1 {
    background: url(../images/event/Heros-Crown/s1_slide1/en.png) center 0/auto 100% no-repeat
}

.es .s1_slide1 {
    background: url(../images/event/Heros-Crown/s1_slide1/es.png) center 0/auto 100% no-repeat
}

.fr .s1_slide1 {
    background: url(../images/event/Heros-Crown/s1_slide1/fr.png) center 0/auto 100% no-repeat
}

.HK .s1_slide1 {
    background: url(../images/event/Heros-Crown/s1_slide1/hk.png) center 0/auto 100% no-repeat
}

.id .s1_slide1 {
    background: url(../images/event/Heros-Crown/s1_slide1/id.png) center 0/auto 100% no-repeat
}

.my .s1_slide1 {
    background: url(../images/event/Heros-Crown/s1_slide1/my.png) center 0/auto 100% no-repeat
}

.pt .s1_slide1 {
    background: url(../images/event/Heros-Crown/s1_slide1/pt.png) center 0/auto 100% no-repeat
}

.ru .s1_slide1 {
    background: url(../images/event/Heros-Crown/s1_slide1/ru.png) center 0/auto 100% no-repeat
}

.th .s1_slide1 {
    background: url(../images/event/Heros-Crown/s1_slide1/th.png) center 0/auto 100% no-repeat
}

.tr .s1_slide1 {
    background: url(../images/event/Heros-Crown/s1_slide1/tr.png) center 0/auto 100% no-repeat
}

.TW .s1_slide1 {
    background: url(../images/event/Heros-Crown/s1_slide1/tw.png) center 0/auto 100% no-repeat
}

.ur .s1_slide1 {
    background: url(../images/event/Heros-Crown/s1_slide1/ur.png) center 0/auto 100% no-repeat
}

.uz .s1_slide1 {
    background: url(../images/event/Heros-Crown/s1_slide1/uz.png) center 0/auto 100% no-repeat
}

.vi .s1_slide1 {
    background: url(../images/event/Heros-Crown/s1_slide1/vi.png) center 0/auto 100% no-repeat
}

.s1_slide2 {
    background: url(../images/event/Heros-Crown/s1_slide2/en.png) 0 0 / 100% 100% no-repeat
}

.ar .s1_slide2 {
    background: url(../images/event/Heros-Crown/s1_slide2/ar.png) center 0/auto 100% no-repeat
}

.de .s1_slide2 {
    background: url(../images/event/Heros-Crown/s1_slide2/de.png) center 0/auto 100% no-repeat
}

.en .s1_slide2 {
    background: url(../images/event/Heros-Crown/s1_slide2/en.png) center 0/auto 100% no-repeat
}

.es .s1_slide2 {
    background: url(../images/event/Heros-Crown/s1_slide2/es.png) center 0/auto 100% no-repeat
}

.fr .s1_slide2 {
    background: url(../images/event/Heros-Crown/s1_slide2/fr.png) center 0/auto 100% no-repeat
}

.HK .s1_slide2 {
    background: url(../images/event/Heros-Crown/s1_slide2/hk.png) center 0/auto 100% no-repeat
}

.id .s1_slide2 {
    background: url(../images/event/Heros-Crown/s1_slide2/id.png) center 0/auto 100% no-repeat
}

.my .s1_slide2 {
    background: url(../images/event/Heros-Crown/s1_slide2/my.png) center 0/auto 100% no-repeat
}

.pt .s1_slide2 {
    background: url(../images/event/Heros-Crown/s1_slide2/pt.png) center 0/auto 100% no-repeat
}

.ru .s1_slide2 {
    background: url(../images/event/Heros-Crown/s1_slide2/ru.png) center 0/auto 100% no-repeat
}

.th .s1_slide2 {
    background: url(../images/event/Heros-Crown/s1_slide2/th.png) center 0/auto 100% no-repeat
}

.tr .s1_slide2 {
    background: url(../images/event/Heros-Crown/s1_slide2/tr.png) center 0/auto 100% no-repeat
}

.TW .s1_slide2 {
    background: url(../images/event/Heros-Crown/s1_slide2/tw.png) center 0/auto 100% no-repeat
}

.ur .s1_slide2 {
    background: url(../images/event/Heros-Crown/s1_slide2/ur.png) center 0/auto 100% no-repeat
}

.uz .s1_slide2 {
    background: url(../images/event/Heros-Crown/s1_slide2/uz.png) center 0/auto 100% no-repeat
}

.vi .s1_slide2 {
    background: url(../images/event/Heros-Crown/s1_slide2/vi.png) center 0/auto 100% no-repeat
}

.s1_page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(1558/1920*100vw);
    height: calc(20/1920*100vw);
    margin: 0 auto;
    position: relative
}

.s1_prev {
    display: block;
    width: calc(178/1920*100vw);
    height: calc(178/1920*100vw);
    background: url(../images/event/Heros-Crown/s2_page.png) 0 0 / calc(1558/1920*100vw) calc(178/1920*100vw) no-repeat;
    position: absolute;
    top: calc(-374/1920*100vw);
    left: 0
}

.ar .s1_prev,
.ur .s2_prev {
    background: url(../images/event/Heros-Crown/s2_page.png) right 0 / calc(1558/1920*100vw) calc(178/1920*100vw) no-repeat;
    left: initial;
    right: 0
}

.s1_next {
    display: block;
    width: calc(178/1920*100vw);
    height: calc(178/1920*100vw);
    background: url(../images/event/Heros-Crown/s2_page.png) right 0 / calc(1558/1920*100vw) calc(178/1920*100vw) no-repeat;
    position: absolute;
    top: calc(-374/1920*100vw);
    right: 0
}

.ar .s1_next,
.ur .s2_next {
    background: url(../images/event/Heros-Crown/s2_page.png) 0 0 / calc(1558/1920*100vw) calc(178/1920*100vw) no-repeat;
    right: initial;
    left: 0
}

.s1_pagination {
    margin: 0 calc(10/1920*100vw)
}

.s1_pagination span {
    width: calc(48/1920*100vw);
    height: calc(4/1920*100vw);
    border-radius: 0;
    margin: 0 calc(10/1920*100vw);
    background-color: #5a6975;
    opacity: 1
}

.s1_pagination span.swiper-pagination-bullet-active {
    background-color: #ce8d40
}

.s1_tit {
    display: block;
    width: calc(390/1920*100vw);
    height: calc(50/1920*100vw);
    position: absolute;
    top: calc(90/1920*100vw);
    left: calc(860/1920*100vw)
}

.s1_tit1 {
    background: url(../images/event/Heros-Crown/tit1_1/en.png) center 0 / auto 100% no-repeat
}

.ar .s1_tit1 {
    background: url(../images/event/Heros-Crown/tit1_1/ar.png) center 0/auto 100% no-repeat
}

.de .s1_tit1 {
    background: url(../images/event/Heros-Crown/tit1_1/de.png) center 0/auto 100% no-repeat
}

.en .s1_tit1 {
    background: url(../images/event/Heros-Crown/tit1_1/en.png) center 0/auto 100% no-repeat
}

.es .s1_tit1 {
    background: url(../images/event/Heros-Crown/tit1_1/es.png) center 0/auto 100% no-repeat
}

.fr .s1_tit1 {
    background: url(../images/event/Heros-Crown/tit1_1/fr.png) center 0/auto 100% no-repeat
}

.HK .s1_tit1 {
    background: url(../images/event/Heros-Crown/tit1_1/hk.png) center 0/auto 100% no-repeat
}

.id .s1_tit1 {
    background: url(../images/event/Heros-Crown/tit1_1/id.png) center 0/auto 100% no-repeat
}

.my .s1_tit1 {
    background: url(../images/event/Heros-Crown/tit1_1/my.png) center 0/auto 100% no-repeat
}

.pt .s1_tit1 {
    background: url(../images/event/Heros-Crown/tit1_1/pt.png) center 0/auto 100% no-repeat
}

.ru .s1_tit1 {
    background: url(../images/event/Heros-Crown/tit1_1/ru.png) center 0/auto 100% no-repeat
}

.th .s1_tit1 {
    background: url(../images/event/Heros-Crown/tit1_1/th.png) center 0/auto 100% no-repeat
}

.tr .s1_tit1 {
    background: url(../images/event/Heros-Crown/tit1_1/tr.png) center 0/auto 100% no-repeat
}

.TW .s1_tit1 {
    background: url(../images/event/Heros-Crown/tit1_1/tw.png) center 0/auto 100% no-repeat
}

.ur .s1_tit1 {
    background: url(../images/event/Heros-Crown/tit1_1/ur.png) center 0/auto 100% no-repeat
}

.uz .s1_tit1 {
    background: url(../images/event/Heros-Crown/tit1_1/uz.png) center 0/auto 100% no-repeat
}

.vi .s1_tit1 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(395 / 1920 * 100vw);
    height: calc(45 / 1920 * 100vw);
    background: url(../images/event/Heros-Crown/bgtx03.png) 0 0 / 100% 100% no-repeat;
    position: absolute;
    top: calc(90 / 1920 * 100vw);
    left: calc(854 / 1920 * 100vw);
    font-size: calc(22 / 1920 * 100vw);
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    color: #e8b75a;
    box-sizing: border-box;
    padding: calc(24 / 1920 * 100vw) calc(38 / 1920 * 100vw) calc(22 / 1920 * 100vw);

}

.s1_tit2 {
    background: url(../images/event/Heros-Crown/tit1_2/en.png) center 0 / auto 100% no-repeat
}

.ar .s1_tit2 {
    background: url(../images/event/Heros-Crown/tit1_2/ar.png) center 0/auto 100% no-repeat
}

.de .s1_tit2 {
    background: url(../images/event/Heros-Crown/tit1_2/de.png) center 0/auto 100% no-repeat
}

.en .s1_tit2 {
    background: url(../images/event/Heros-Crown/tit1_2/en.png) center 0/auto 100% no-repeat
}

.es .s1_tit2 {
    background: url(../images/event/Heros-Crown/tit1_2/es.png) center 0/auto 100% no-repeat
}

.fr .s1_tit2 {
    background: url(../images/event/Heros-Crown/tit1_2/fr.png) center 0/auto 100% no-repeat
}

.HK .s1_tit2 {
    background: url(../images/event/Heros-Crown/tit1_2/hk.png) center 0/auto 100% no-repeat
}

.id .s1_tit2 {
    background: url(../images/event/Heros-Crown/tit1_2/id.png) center 0/auto 100% no-repeat
}

.my .s1_tit2 {
    background: url(../images/event/Heros-Crown/tit1_2/my.png) center 0/auto 100% no-repeat
}

.pt .s1_tit2 {
    background: url(../images/event/Heros-Crown/tit1_2/pt.png) center 0/auto 100% no-repeat
}

.ru .s1_tit2 {
    background: url(../images/event/Heros-Crown/tit1_2/ru.png) center 0/auto 100% no-repeat
}

.th .s1_tit2 {
    background: url(../images/event/Heros-Crown/tit1_2/th.png) center 0/auto 100% no-repeat
}

.tr .s1_tit2 {
    background: url(../images/event/Heros-Crown/tit1_2/tr.png) center 0/auto 100% no-repeat
}

.TW .s1_tit2 {
    background: url(../images/event/Heros-Crown/tit1_2/tw.png) center 0/auto 100% no-repeat
}

.ur .s1_tit2 {
    background: url(../images/event/Heros-Crown/tit1_2/ur.png) center 0/auto 100% no-repeat
}

.uz .s1_tit2 {
    background: url(../images/event/Heros-Crown/tit1_2/uz.png) center 0/auto 100% no-repeat
}

.vi .s1_tit2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(395 / 1920 * 100vw);
    height: calc(45 / 1920 * 100vw);
    background: url(../images/event/Heros-Crown/bgtx03.png) 0 0 / 100% 100% no-repeat;
    position: absolute;
    top: calc(90 / 1920 * 100vw);
    left: calc(854 / 1920 * 100vw);
    font-size: calc(22 / 1920 * 100vw);
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    color: #e8b75a;
    box-sizing: border-box;
    padding: calc(24 / 1920 * 100vw) calc(38 / 1920 * 100vw) calc(22 / 1920 * 100vw)
}

.s1_play {
    display: block;
    width: calc(92/1920*100vw);
    height: calc(92/1920*100vw);
    background: url(../images/event/Heros-Crown/btn_play.png) 0 0 / 100% 100% no-repeat;
    position: absolute;
    top: calc(230/1920*100vw);
    left: calc(1012/1920*100vw);
    -webkit-animation: aniplay 2s infinite linear;
    animation: aniplay 2s infinite linear
}

.btn_version {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(338/1920*100vw);
    height: calc(90/1920*100vw);
    background: url(../images/event/Heros-Crown/btn_version.png) 0 0 / 100% 100% no-repeat;
    position: absolute;
    top: calc(416/1920*100vw);
    left: calc(888/1920*100vw);
    font-size: calc(22/1920*100vw);
    line-height: 1;
    text-align: center;
    color: #e8b75a;
    box-sizing: border-box;
    padding: calc(24/1920*100vw) calc(38/1920*100vw) calc(22/1920*100vw)
}

.tit2 {
    display: block;
    width: 100%;
    height: calc(73/1920*100vw);
    background: url(../images/event/Heros-Crown/tit2/en.png) center 0 / auto 100% no-repeat;
    margin: calc(30/1920*100vw) auto calc(10/1920*100vw)
}

.ar .tit2 {
    background: url(../images/event/Heros-Crown/tit2/ar.png) center 0/auto 100% no-repeat
}

.de .tit2 {
    background: url(../images/event/Heros-Crown/tit2/de.png) center 0/auto 100% no-repeat
}

.en .tit2 {
    background: url(../images/event/Heros-Crown/tit2/en.png) center 0/auto 100% no-repeat
}

.es .tit2 {
    background: url(../images/event/Heros-Crown/tit2/es.png) center 0/auto 100% no-repeat
}

.fr .tit2 {
    background: url(../images/event/Heros-Crown/tit2/fr.png) center 0/auto 100% no-repeat
}

.HK .tit2 {
    background: url(../images/event/Heros-Crown/tit2/hk.png) center 0/auto 100% no-repeat
}

.id .tit2 {
    background: url(../images/event/Heros-Crown/tit2/id.png) center 0/auto 100% no-repeat
}

.my .tit2 {
    background: url(../images/event/Heros-Crown/tit2/my.png) center 0/auto 100% no-repeat
}

.pt .tit2 {
    background: url(../images/event/Heros-Crown/tit2/pt.png) center 0/auto 100% no-repeat
}

.ru .tit2 {
    background: url(../images/event/Heros-Crown/tit2/ru.png) center 0/auto 100% no-repeat
}

.th .tit2 {
    background: url(../images/event/Heros-Crown/tit2/th.png) center 0/auto 100% no-repeat
}

.tr .tit2 {
    background: url(../images/event/Heros-Crown/tit2/tr.png) center 0/auto 100% no-repeat
}

.TW .tit2 {
    background: url(../images/event/Heros-Crown/tit2/tw.png) center 0/auto 100% no-repeat
}

.ur .tit2 {
    background: url(../images/event/Heros-Crown/tit2/ur.png) center 0/auto 100% no-repeat
}

.uz .tit2 {
    background: url(../images/event/Heros-Crown/tit2/uz.png) center 0/auto 100% no-repeat
}

.vi .tit2 {
    background: url(../images/event/Heros-Crown/tit2/vi.png) center 0/auto 100% no-repeat
}

.s2_swiper {
    display: block;
    width: calc(1358/1920*100vw);
    height: calc(668/1920*100vw);
    margin: calc(10/1920*100vw) auto 0
}

.s2_swiper .swiper-slide {
    background: url(../images/event/Heros-Crown/s2_box.png) 0 0 / 100% 100% no-repeat
}

.s2_role {
    width: calc(391/1920*100vw);
    height: calc(480/1920*100vw);
    position: absolute;
    top: calc(96/1920*100vw);
    left: calc(144/1920*100vw)
}

.s2_role1 {
    background: url(../images/event/Heros-Crown/s2_role1.png) 0 0 / 100% 100% no-repeat
}

.s2_role2 {
    background: url(../images/event/Heros-Crown/s2_role2.png) 0 0 / 100% 100% no-repeat
}

.s2_role3 {
    background: url(../images/event/Heros-Crown/s2_role3.png) 0 0 / 100% 100% no-repeat
}

.s2_role4 {
    background: url(../images/event/Heros-Crown/s2_role4.png) 0 0 / 100% 100% no-repeat
}

.s2_role5 {
    background: url(../images/event/Heros-Crown/s2_role5.png) 0 0 / 100% 100% no-repeat
}

.s2_text {
    display: block;
    width: calc(700/1920*100vw);
    height: calc(480/1920*100vw);
    position: absolute;
    top: calc(96/1920*100vw);
    left: calc(600/1920*100vw);
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 0 calc(110/1920*100vw) 0 0
}

.ar .s2_text,
.ur .s2_text {
    padding: 0 calc(50/1920*100vw) 0 calc(60/1920*100vw)
}

.s2_text b {
    display: block;
    width: 100%;
    font-size: calc(36/1920*100vw);
    line-height: 1.4;
    text-align: center;
    background-image: -webkit-linear-gradient(bottom, #e6bd97, #d18552);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.s2_text p {
    display: block;
    width: 100%;
    font-size: calc(24/1920*100vw);
    line-height: calc(30/1920*100vw);
    color: #e2b189;
    margin: calc(10/1920*100vw) 0
}

.s2_text p span.act:before {
    display: inline-block;
    content: '';
    width: calc(21/1920*100vw);
    height: calc(20/1920*100vw);
    background: url(../images/event/Heros-Crown/s2_text.png) 0 0 / 100% 100% no-repeat;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

.ar .s2_text p span.act:before,
.ur .s2_text p span.act:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

.s2_text p span {
    display: block;
    width: 100%
}

.s2_pic {
    display: block;
    width: calc(590/1920*100vw);
    height: calc(331/1920*100vw)
}

.s2_pic1 {
    background: url(../images/event/Heros-Crown/s2_pic1.png) 0 0 / 100% 100% no-repeat
}

.s2_pic2 {
    background: url(../images/event/Heros-Crown/s2_pic2.png) 0 0 / 100% 100% no-repeat
}

.s2_pic3 {
    background: url(../images/event/Heros-Crown/s2_pic3.png) 0 0 / 100% 100% no-repeat
}

.s2_pic4 {
    background: url(../images/event/Heros-Crown/s2_pic4.png) 0 0 / 100% 100% no-repeat
}

.s2_pic5 {
    background: url(../images/event/Heros-Crown/s2_pic5.png) 0 0 / 100% 100% no-repeat
}

.s2_text::-webkit-scrollbar {
    width: calc(2/1920*100vw);
    background-color: rgba(0, 0, 0, 0)
}

.s2_text::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0)
}

.s2_text::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    background-color: #ae6a02
}

.s2_page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(1558/1920*100vw);
    height: calc(20/1920*100vw);
    margin: 0 auto;
    position: relative
}

.s2_prev {
    display: block;
    width: calc(178/1920*100vw);
    height: calc(178/1920*100vw);
    background: url(../images/event/Heros-Crown/s2_page.png) 0 0 / calc(1558/1920*100vw) calc(178/1920*100vw) no-repeat;
    position: absolute;
    top: calc(-416/1920*100vw);
    left: 0
}

.s2_next {
    display: block;
    width: calc(178/1920*100vw);
    height: calc(178/1920*100vw);
    background: url(../images/event/Heros-Crown/s2_page.png) right 0 / calc(1558/1920*100vw) calc(178/1920*100vw) no-repeat;
    position: absolute;
    top: calc(-416/1920*100vw);
    right: 0
}

.s2_pagination {
    margin: 0 calc(10/1920*100vw)
}

.s2_pagination span {
    width: calc(48/1920*100vw);
    height: calc(4/1920*100vw);
    border-radius: 0;
    margin: 0 calc(10/1920*100vw);
    background-color: #5a6975;
    opacity: 1
}

.s2_pagination span.swiper-pagination-bullet-active {
    background-color: #ce8d40
}

.tit3 {
    display: block;
    width: 100%;
    height: calc(71/1920*100vw);
    background: url(../images/event/Heros-Crown/tit3/en.png) center 0 / auto 100% no-repeat;
    margin: calc(30/1920*100vw) auto calc(10/1920*100vw)
}

.ar .tit3 {
    background: url(../images/event/Heros-Crown/tit3/ar.png) center 0/auto 100% no-repeat
}

.de .tit3 {
    background: url(../images/event/Heros-Crown/tit3/de.png) center 0/auto 100% no-repeat
}

.en .tit3 {
    background: url(../images/event/Heros-Crown/tit3/en.png) center 0/auto 100% no-repeat
}

.es .tit3 {
    background: url(../images/event/Heros-Crown/tit3/es.png) center 0/auto 100% no-repeat
}

.fr .tit3 {
    background: url(../images/event/Heros-Crown/tit3/fr.png) center 0/auto 100% no-repeat
}

.HK .tit3 {
    background: url(../images/event/Heros-Crown/tit3/hk.png) center 0/auto 100% no-repeat
}

.id .tit3 {
    background: url(../images/event/Heros-Crown/tit3/id.png) center 0/auto 100% no-repeat
}

.my .tit3 {
    background: url(../images/event/Heros-Crown/tit3/my.png) center 0/auto 100% no-repeat
}

.pt .tit3 {
    background: url(../images/event/Heros-Crown/tit3/pt.png) center 0/auto 100% no-repeat
}

.ru .tit3 {
    background: url(../images/event/Heros-Crown/tit3/ru.png) center 0/auto 100% no-repeat
}

.th .tit3 {
    background: url(../images/event/Heros-Crown/tit3/th.png) center 0/auto 100% no-repeat
}

.tr .tit3 {
    background: url(../images/event/Heros-Crown/tit3/tr.png) center 0/auto 100% no-repeat
}

.TW .tit3 {
    background: url(../images/event/Heros-Crown/tit3/tw.png) center 0/auto 100% no-repeat
}

.ur .tit3 {
    background: url(../images/event/Heros-Crown/tit3/ur.png) center 0/auto 100% no-repeat
}

.uz .tit3 {
    background: url(../images/event/Heros-Crown/tit3/uz.png) center 0/auto 100% no-repeat
}

.vi .tit3 {
    background: url(../images/event/Heros-Crown/tit3/vi.png) center 0/auto 100% no-repeat
}

.s3_box {
    display: block;
    width: calc(1000 / 1920 * 100vw);
    height: calc(718 / 1920 * 100vw);
    background: url(../images/event/Heros-Crown/s3_box/en.png) 0 0 / 100% 100% no-repeat;
    margin: calc(10/1920*100vw) auto 0;
    position: relative;

}

.ar .s3_box {
    background: url(../images/event/Heros-Crown/s3_box/ar.png) center 0/auto 100% no-repeat
}

.de .s3_box {
    background: url(../images/event/Heros-Crown/s3_box/de.png) center 0/auto 100% no-repeat
}

.en .s3_box {
    background: url(../images/event/Heros-Crown/s3_box/en.png) center 0/auto 100% no-repeat
}

.es .s3_box {
    background: url(../images/event/Heros-Crown/s3_box/es.png) center 0/auto 100% no-repeat
}

.fr .s3_box {
    background: url(../images/event/Heros-Crown/s3_box/fr.png) center 0/auto 100% no-repeat
}

.HK .s3_box {
    background: url(../images/event/Heros-Crown/s3_box/hk.png) center 0/auto 100% no-repeat
}

.id .s3_box {
    background: url(../images/event/Heros-Crown/s3_box/id.png) center 0/auto 100% no-repeat
}

.my .s3_box {
    background: url(../images/event/Heros-Crown/s3_box/my.png) center 0/auto 100% no-repeat
}

.pt .s3_box {
    background: url(../images/event/Heros-Crown/s3_box/pt.png) center 0/auto 100% no-repeat
}

.ru .s3_box {
    background: url(../images/event/Heros-Crown/s3_box/ru.png) center 0/auto 100% no-repeat
}

.th .s3_box {
    background: url(../images/event/Heros-Crown/s3_box/th.png) center 0/auto 100% no-repeat
}

.tr .s3_box {
    background: url(../images/event/Heros-Crown/s3_box/tr.png) center 0/auto 100% no-repeat
}

.TW .s3_box {
    background: url(../images/event/Heros-Crown/s3_box/tw.png) center 0/auto 100% no-repeat
}

.ur .s3_box {
    background: url(../images/event/Heros-Crown/s3_box/ur.png) center 0/auto 100% no-repeat
}

.uz .s3_box {
    background: url(../images/event/Heros-Crown/s3_box/uz.png) center 0/auto 100% no-repeat
}

.vi .s3_box {
    background: url(../images/event/Heros-Crown/s3_box/vi.png) center 0/auto 100% no-repeat
}

.s3_play {
    display: block;
    width: calc(114/1920*100vw);
    height: calc(114/1920*100vw);
    background: url(../images/event/Heros-Crown/btn_play.png) 0 0 / 100% 100% no-repeat;
    position: absolute;
    top: calc(260/1920*100vw);
    left: 50%;
    margin-left: calc(-57/1920*100vw);
    -webkit-animation: aniplay 2s infinite linear;
    animation: aniplay 2s infinite linear
}

.text {
    display: block;
    width: calc(42.93vw);
    height: calc(5.83vw);
    position: absolute;
    top: calc(30.05vw);
    left: 50%;
    margin-left: calc(-21.84vw);
    color: rgb(227, 177, 137);
    font-size: calc(0.92vw);
    line-height: calc(1.15vw);
    text-align: center;
    overflow: hidden auto;
    /* display: block;
    width: calc(58.3333vw);
    height: calc(7.91667vw);
    position: absolute;
    top: calc(40.8333vw);
    left: 50%;
    margin-left: calc(-29.6875vw);
    color: rgb(227, 177, 137);
    font-size: calc(1.25vw);
    line-height: calc(1.5625vw);
    text-align: center;
    overflow: hidden auto; */
}

.text b {
    display: block;
    width: 100%;
    font-size: calc(36/1920*100vw);
    line-height: 1.4;
    background-image: -webkit-linear-gradient(bottom, #e6bd97, #d18552);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: calc(10/1920*100vw)
}

.text::-webkit-scrollbar {
    width: calc(2/1920*100vw);
    background-color: rgba(0, 0, 0, 0)
}

.text::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0)
}

.text::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    background-color: #ae6a02
}

.tit4 {
    display: block;
    width: 100%;
    height: calc(74/1920*100vw);
    background: url(../images/event/Heros-Crown/tit4/en.png) center 0 / auto 100% no-repeat;
    margin: calc(30/1920*100vw) auto calc(10/1920*100vw)
}

.ar .tit4 {
    background: url(../images/event/Heros-Crown/tit4/ar.png) center 0/auto 100% no-repeat
}

.de .tit4 {
    background: url(../images/event/Heros-Crown/tit4/de.png) center 0/auto 100% no-repeat
}

.en .tit4 {
    background: url(../images/event/Heros-Crown/tit4/en.png) center 0/auto 100% no-repeat
}

.es .tit4 {
    background: url(../images/event/Heros-Crown/tit4/es.png) center 0/auto 100% no-repeat
}

.fr .tit4 {
    background: url(../images/event/Heros-Crown/tit4/fr.png) center 0/auto 100% no-repeat
}

.HK .tit4 {
    background: url(../images/event/Heros-Crown/tit4/hk.png) center 0/auto 100% no-repeat
}

.id .tit4 {
    background: url(../images/event/Heros-Crown/tit4/id.png) center 0/auto 100% no-repeat
}

.my .tit4 {
    background: url(../images/event/Heros-Crown/tit4/my.png) center 0/auto 100% no-repeat
}

.pt .tit4 {
    background: url(../images/event/Heros-Crown/tit4/pt.png) center 0/auto 100% no-repeat
}

.ru .tit4 {
    background: url(../images/event/Heros-Crown/tit4/ru.png) center 0/auto 100% no-repeat
}

.th .tit4 {
    background: url(../images/event/Heros-Crown/tit4/th.png) center 0/auto 100% no-repeat
}

.tr .tit4 {
    background: url(../images/event/Heros-Crown/tit4/tr.png) center 0/auto 100% no-repeat
}

.TW .tit4 {
    background: url(../images/event/Heros-Crown/tit4/tw.png) center 0/auto 100% no-repeat
}

.ur .tit4 {
    background: url(../images/event/Heros-Crown/tit4/ur.png) center 0/auto 100% no-repeat
}

.uz .tit4 {
    background: url(../images/event/Heros-Crown/tit4/uz.png) center 0/auto 100% no-repeat
}

.vi .tit4 {
    background: url(../images/event/Heros-Crown/tit4/vi.png) center 0/auto 100% no-repeat
}

.s4_box {
    display: block;
    width: calc(1358/1920*100vw);
    height: calc(804/1920*100vw);
    background: url(../images/event/Heros-Crown/s4_box/en.png) 0 0 / 100% 100% no-repeat;
    margin: calc(10/1920*100vw) auto 0;
    position: relative
}

.ar .s4_box {
    background: url(../images/event/Heros-Crown/s4_box/ar.png) center 0/auto 100% no-repeat
}

.de .s4_box {
    background: url(../images/event/Heros-Crown/s4_box/de.png) center 0/auto 100% no-repeat
}

.en .s4_box {
    background: url(../images/event/Heros-Crown/s4_box/en.png) center 0/auto 100% no-repeat
}

.es .s4_box {
    background: url(../images/event/Heros-Crown/s4_box/es.png) center 0/auto 100% no-repeat
}

.fr .s4_box {
    background: url(../images/event/Heros-Crown/s4_box/fr.png) center 0/auto 100% no-repeat
}

.HK .s4_box {
    background: url(../images/event/Heros-Crown/s4_box/hk.png) center 0/auto 100% no-repeat
}

.id .s4_box {
    background: url(../images/event/Heros-Crown/s4_box/id.png) center 0/auto 100% no-repeat
}

.my .s4_box {
    background: url(../images/event/Heros-Crown/s4_box/my.png) center 0/auto 100% no-repeat
}

.pt .s4_box {
    background: url(../images/event/Heros-Crown/s4_box/pt.png) center 0/auto 100% no-repeat
}

.ru .s4_box {
    background: url(../images/event/Heros-Crown/s4_box/ru.png) center 0/auto 100% no-repeat
}

.th .s4_box {
    background: url(../images/event/Heros-Crown/s4_box/th.png) center 0/auto 100% no-repeat
}

.tr .s4_box {
    background: url(../images/event/Heros-Crown/s4_box/tr.png) center 0/auto 100% no-repeat
}

.TW .s4_box {
    background: url(../images/event/Heros-Crown/s4_box/tw.png) center 0/auto 100% no-repeat
}

.ur .s4_box {
    background: url(../images/event/Heros-Crown/s4_box/ur.png) center 0/auto 100% no-repeat
}

.uz .s4_box {
    background: url(../images/event/Heros-Crown/s4_box/uz.png) center 0/auto 100% no-repeat
}

.vi .s4_box {
    background: url(../images/event/Heros-Crown/s4_box/vi.png) center 0/auto 100% no-repeat
}

.s4_play {
    display: block;
    width: calc(114/1920*100vw);
    height: calc(114/1920*100vw);
    background: url(../images/event/Heros-Crown/btn_play.png) 0 0 / 100% 100% no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: calc(-57/1920*100vw);
    margin-left: calc(-57/1920*100vw);
    -webkit-animation: aniplay 2s infinite linear;
    animation: aniplay 2s infinite linear
}

.dialog {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background: rgba(0, 0, 0, .8);
    display: none
}

.pop {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: none;
    outline: 0;
    border: 0;
    position: absolute;
    top: 51%;
    left: 50%
}

.pop_close {
    position: absolute;
    top: calc(-39/1920*100vw);
    right: calc(0/1920*100vw);
    width: calc(39/1920*100vw);
    height: calc(39/1920*100vw);
    background: url(../images/event/Heros-Crown/pop_close.png) 0 0/100% 100% no-repeat
}

#vindex_play {
    width: calc(1334/1920*100vw);
    height: calc(750/1920*100vw);
    margin-left: calc(-667/1920*100vw);
    margin-top: calc(-375/1920*100vw);
    display: none;
    outline: 0;
    padding: 0
}

#vplay_con {
    width: 100%;
    height: 100%;
    background-color: #000
}

#vindex_play .pop_con {
    padding: 0;
    width: 100%;
    height: 100%
}

#vindex_play .pop_close {
    top: calc(-52/1920*100vw);
    right: 0
}


@-webkit-keyframes aniplay {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.1)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes aniplay {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.1)
    }

    100% {
        transform: scale(1)
    }
}