/* reset */
body,
div,
p,
ul,
ol,
li,
table,
tbody,
tr,
td,
textarea,
form,
input,
h1,
h2,
h3,
h4,
h5,
dl,
dt,
dd,
img,
iframe,
header,
nav,
section,
article,
footer,
figure,
figcaption,
menu { margin: 0; padding: 0; list-style: none; }

body { -webkit-text-size-adjust: none; font-size: 12rem; }

header,
nav,
section,
article,
footer,
figure,
figcaption { display: block; }

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

fieldset { border: none; margin: 0; padding: 0; }

a,
li,
ul,
[onclick] { -webkit-tap-highlight-color: none; -webkit-tap-highlight-color: transparent;outline: none; }

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

em,
i,
strong { font-weight: normal; font-style: normal; }

a { text-decoration: none; }

img { width: auto; max-width: 100%; }

:focus { outline: none; }


html,
body { width: 100%; height: 100%; }

@font-face { font-family: dpr; src: url(../img/font/DINPro-Regular.otf); }
@font-face { font-family: tjp; src: url(../img/font/TrajanPro-Bold.otf); }

@font-face { font-family: jafont; src: url(../img/font/NotoSerifJP-Regular.ttf); }
@font-face { font-family: kofont; src: url(../img/font/NotoSerifKR-Regular.ttf); }
@font-face { font-family: thfont; src: url(../img/font/NotoSerifThai-Regular.ttf); }
@font-face { font-family:xq ; src: url(../img/font/xique.ttf); }


.lang_en{ font-family: tjp;}
.lang_zh-tw{ font-family: xq;}
.lang_ko{ font-family: kofont;}
.lang_ja{ font-family: jafont;}
.lang_th{ font-family: thfont;}

/* header */

.header {
    position: fixed;
    width: 100%;
    height: 245rem;
    background: url(/img/header/navbg.png) center center no-repeat;
    background-size: 100% 100%;
    z-index: 90;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.logo {
    position: absolute;
    top: 15rem;
    left: 30rem;
    width: 268rem;
    height: 95rem;
    pointer-events: auto;
}
.logo img{
    width: 100%;
}

.header-left .topNav {
    position: absolute;
    left: 500rem;
    height: 78rem;
    width: auto;
    vertical-align: top;
    font-size: 0;
    line-height: 78rem;
    pointer-events: auto;
}

.header-left .topNav li {
    position: relative;
    display: inline-block;
    font-size: 24rem;
    color: #ffdb9d;
    padding: 0 20rem;
    cursor: pointer;
    vertical-align: top;
}

.header-left .topNav li a {
    color: #ffdb9d;
    display: block;
    position: relative;
    padding-left: 38rem;
}

.header-left .topNav li a::before {
    content: '';
    position: absolute;
    left: 0;
    height: 30rem;
    width: 35rem;
    top: 50%;
    margin-top: -17rem;
    background: url(/img/header/topicon.png) no-repeat;
    background-size: 750rem auto;
}



.header-left .topNav .nav1 a::before {
    background-position: -10rem 0;
}




.header-left .topNav .nav2 a::before {
    background-position: -140rem 0;
}

.header-left .topNav .nav3 a::before {
    background-position: -331rem 0;
}

.header-left .topNav .nav4 a::before {
    background-position: -520rem 0;
}

.header-left .topNav .nav5 a::before {
    background-position: -703rem 0;
}




.header-left .topNav li.active a::after,
.header-left .topNav li:hover a::after {
    content: '';
    position: absolute;
    left: 50%;
    height: 71rem;
    width: 74rem;
    margin-left: -20rem;
    background: url(/img/header/topOn.png) no-repeat;
    background-size: 71rem auto;
}

.header-left .topNav .nav1.active a::before,
.header-left .topNav .nav1:hover a::before {
    background-position: -10rem -45rem;
}

.header-left .topNav .nav2.active a::before,
.header-left .topNav .nav2:hover a::before {
    background-position: -140rem -45rem;
}

.header-left .topNav .nav3.active a::before,
.header-left .topNav .nav3:hover a::before {
    background-position: -331rem -45rem;
}

.header-left .topNav .nav4.active a::before,
.header-left .topNav .nav4:hover a::before {
    background-position: -520rem -45rem;
}

.header-left .topNav .nav5.active a::before,
.header-left .topNav .nav5:hover a::before {
    background-position: -703rem -45rem;
}





.header-right {
    position: absolute;
    right: 70rem;
    height: auto;
    top: 0;
    pointer-events: auto;
}

.header-right .topsteam {
    width: 260rem;
    height: 50rem;
    line-height: 50rem;
    background: url(/img/header/topyuyue.png) center center no-repeat;
    background-size: cover;
    display: inline-block;
    margin-top: 13rem;
    margin-right: 10rem;
    color: #442315;
    font-size:16rem;
    text-align: center;
    text-transform: uppercase;
}

.header-right .langbox {
    cursor: pointer;
    display: inline-block;
    width: 180rem;
    height: 45rem;
    background: url(../img/header/langbg.png) center center no-repeat;
    background-size: 180rem auto;
    position: relative;
    z-index: 21;
}



.header-right .langbox span {
    font-size: 16rem;
    color: #442315;
    line-height: 50rem;
    display: inline-block;
    vertical-align: revert;
    text-indent: 58rem;
}

.header-right .showyy {
    display: none;
    position: absolute;
    width: 171rem;
    height: 324rem;
    background: url(../img/header/langboxbg.png) no-repeat;
    background-size: 171rem auto;
    z-index: 20;
    top: 42rem;
    right: 4rem;
    overflow: hidden;
}

.header-right .showyy ul {
    height: 100%;
    margin-top: 15rem;
}

.header-right .showyy li {
    cursor: pointer;
    height: 40rem;
    line-height: 40rem;
    width: 100%;
    color: #ffecac;
    font-size: 18rem;
    text-indent: 55rem;
    position: relative;
}

.header-right .showyy li::after {
    content: '';
    position: absolute;
    top: 7rem;
    left: 30rem;
    width: 27rem;
    height: 27rem;
    background: url(../img/header/langDian.png) left center no-repeat;
    background-size: 12rem;
}


.header-right .showyy li.on {
    color: #fff;
}

.header-right .showyy li.on::after {
    left: 22rem;
    background: url(../img/header/langDian1.png) left center no-repeat;
    background-size: 27rem;
}




.header .mediaBox {
    pointer-events: all;
    position: absolute;
    right: 30rem;
    top: 100rem;
    width: auto;
    height: 40rem;
    font-size: 0;
}

.header .mediaBox a {
    display: inline-block;
    height: 40rem;
    width: 40rem;
    margin-right: 20rem;
}

.header .mediaBox a:last-child {
    margin-right: 0;
}
.header .mediaBox a.steam{
    background: url(../img/header/s.png) center center no-repeat;
    background-size: 36rem auto;
}
.header .mediaBox a.dy{
    background: url(../img/header/dy.png) center center no-repeat;
    background-size: 36rem auto;
}
.header .mediaBox a.in{
    background: url(../img/header/in.png) center center no-repeat;
    background-size: 32rem auto;
}
.header .mediaBox a.x {
    background: url(../img/header/x.png) center center no-repeat;
    background-size: 35rem auto;
}

.header .mediaBox a.feacbook {
    background: url(../img/header/f.png) center center no-repeat;
    background-size: 35rem auto;
}

.header .mediaBox a.youtube {
    background: url(../img/header/y.png) center center no-repeat;
    background-size: 37rem auto;
}

.header .mediaBox a.discord {
    background: url(../img/header/d.png) center center no-repeat;
    background-size: 34rem auto;
}



.header .mediaBox a.more {
    background: url(../img/header/more.png) center center no-repeat;
    background-size: 40rem auto;
}



/* footer */
/* bottom */

.bottom {
    width: 100%;
    height: 253rem !important;
}

.pagebottom {
    width: 100%;
}


.pagebottom .iconbox {
    width: 100%;
    height: 168rem;
    background: url(../img/bottom/bg.jpg) center top no-repeat;
    background-size: 100% 100%;
    line-height: 168rem;
    text-align: center;
}

.pagebottom .iconbox span {
    font-weight: bold;
    font-size: 38rem;
    color: #ffe3a3;
    font-family: xq;
    vertical-align: middle;
    margin-right: 30rem;
}

.pagebottom .iconbox a {
    display: inline-block;
    width: 60rem;
    height: 60rem;
    vertical-align: middle;
    margin-left: 10rem;
   
}
.pagebottom .iconbox .link1{
    background: url(../img/bottom/steam.png) center center no-repeat;
    background-size: 50rem auto;  
}
.pagebottom .iconbox .link2{
    background: url(../img/bottom/dy.png) center center no-repeat;
    background-size: 49rem auto;  
}

.pagebottom .iconbox .link3{
    background: url(../img/bottom/in.png) center center no-repeat;
    background-size:44rem auto;  
}

.pagebottom .iconbox .link4{
    background: url(../img/bottom/x.png) center center no-repeat;
    background-size: 49rem auto;  
}

.pagebottom .iconbox .link5{
    background: url(../img/bottom/f.png) center center no-repeat;
    background-size: 50rem auto;  
}

.pagebottom .iconbox .link6{
    background: url(../img/bottom/y.png) center center no-repeat;
    background-size: 51rem auto;  
}


.pagebottom .footerbg {
    height: 100%;
    width: 100%;

}


.pagebottom .foot_cpright {
    width: auto;
    margin: 0 auto;
    padding: 20rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagebottom .foot_dark a,
.pagebottom .foot_links li {
    color: #d4c39a;
}

.pagebottom .foot_links {
    width: auto;
}

.pagebottom .foot_links .link_map span,
.pagebottom .foot_links .link_map a {
    color: #d4c39a;
}

.pagebottom .logo1 {
    margin-right: 20rem;
    width: 108rem;
    height: 43rem;
    background: url(../img/bottom/f-logo.png) center center no-repeat;
    background-size: 100% auto;
}






.pagebottom  .footer{  
    background: url(../img/bottom/bg2.jpg) center center no-repeat;
    background-size: cover;
    text-align: center;
    height: 86rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:0  0 5rem  0;
 }

.pagebottom  .footer img{     width: auto;
    vertical-align: super;
    height: 43rem;
    margin-left: 25rem;}
.pagebottom  .footer .zctxt{ color: #d4c39a; display: inline-block;  vertical-align: sub; margin-left: 50rem;text-align: left;font-size: 16rem; }
.pagebottom  .footer .zctxt a{color: #d4c39a !important;background: none !important;font-size: 16rem !important;padding: 0 !important;}
.pagebottom  .footer .zctxt .cookieSet{
    display: inline-block;
    position: relative;
    font-size: 16rem;
    color: #d4c39a;
}
.pagebottom  .footer .zctxt .cookieSet:hover{
    cursor: pointer;
    color: #ffdd40 !important;
}
.pagebottom  .footer .zctxt .cookieSet a{
    background: none !important;
    border: none !important;
    color: #d4c39a !important;
    font-size:16rem !important;
    width: 100%;
    padding: 0 !important;
    position: absolute;
    left: 0;
    opacity: 0;
    text-indent: -9999rem;
}

.pagebottom  .footer .zctxt a:hover{
    color: #ffdd40 !important;
}
.pagebottom  .footer .zctxt p{
    margin-top: 5rem;
}
.pagebottom  .footer span{
    position: relative;
}
.pagebottom  .footer span:hover{
    cursor: pointer;
    color: #ffdd40 !important;
}
.pagebottom  .footer span  a{
    background: none !important;
    border: none !important;
    color: #fff !important;
    font-size: 21rem !important;
    width: 100%;
    padding: 0 !important;
    position: absolute;
    left: 0;
    opacity: 0;
    text-indent: -9999rem;
}




#onetrust-consent-sdk #onetrust-banner-sdk{
    height: 100rem !important; 
}
#onetrust-banner-sdk .ot-sdk-row, #onetrust-pc-sdk .ot-sdk-row, #ot-sdk-cookie-policy .ot-sdk-row{
    padding-top: 30rem;
}


#onetrust-banner-sdk #onetrust-policy-text, #onetrust-banner-sdk .ot-dpd-desc, #onetrust-banner-sdk .ot-b-addl-desc{
    font-size: 14rem !important;
    }
    #onetrust-banner-sdk #onetrust-accept-btn-handler, #onetrust-banner-sdk #onetrust-reject-all-handler, #onetrust-banner-sdk #onetrust-pc-btn-handler{
        font-size: 27rem !important;	
    }
        
    
    
    #onetrust-pc-sdk .ot-accordion-layout .ot-cat-header{font-size: 16rem !important;}
    #onetrust-pc-sdk button,#onetrust-pc-sdk #ot-pc-desc,#onetrust-pc-sdk .ot-cat-header, #onetrust-pc-sdk .ot-always-active{font-size: 16rem !important;}
    #onetrust-pc-sdk #ot-category-title, #onetrust-pc-sdk #ot-pc-title{
      font-size: 20rem !important;
    }
    
    #onetrust-banner-sdk #onetrust-accept-btn-handler, #onetrust-banner-sdk #onetrust-reject-all-handler, #onetrust-banner-sdk #onetrust-pc-btn-handler{margin: 0 !important;}