html,body,div,p,ul,li,dl,dt,dd,em,i,span,a,img,input,h1,h2,h3,h4,h5 { margin: 0; padding: 0}
html,body { overflow-x: hidden}
a,img,input { border: none}
a { text-decoration: none}
em,b,i { font-style: normal}
ul,li { list-style: none}
a,img { -webkit-touch-callout: none; outline: none; }
body { -webkit-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none}
/* 点击出现蓝色边框 */
a:focus,
input:focus,
p:focus,
div:focus{ -webkit-tap-highlight-color:rgba(0,0,0,0); }


@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;}



body { font: 12px/1.75 -apple-system,Arial; -webkit-tap-highlight-color: transparent; }

html,
body { position: relative; height:100%; background-color: #8d4223; }

  html.landscape{ position:relative; overflow:hidden; width:100%; height:100%; padding:0; margin:0; }
  html.landscape body{ position:relative; overflow:hidden; width:100%; height:100%; padding:0; margin:0; }
  html.landscape::before{ content:""; position:fixed; top:0; left:0; height:100%; width:100%; background:#333; z-index:99999; }
  html.landscape::after{ content:""; position:absolute; z-index:99999; height:200px; width:100px; left:50%; top:50%; margin:-110px 0 0 -50px; color:#fff; background-image:url("data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB2CAYAAAAZUrcsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDAwMjcwNkVEQzczMTFFNjlFMDFGQTEzNkM3N0JBMTMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDAwMjcwNkREQzczMTFFNjlFMDFGQTEzNkM3N0JBMTMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ0NzhCMTlBREM1ODExRTZCNTdFRjQ0Q0I1QzRCODZBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQ0NzhCMTlCREM1ODExRTZCNTdFRjQ0Q0I1QzRCODZBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+J30rNQAACRRJREFUeNrsXQlsFVUU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"); background-repeat:no-repeat; background-position:center center; background-size:100px auto; -webkit-transform:rotateZ(-90deg); }

/* header */
.header { position: fixed; top: 0; z-index: 99; width: 100%; background: url(../img/header/bg.png) center center no-repeat; background-size: cover; height:167rem; }

.header .logo { width: 101rem; position: absolute; left: 15rem; top:15rem; }

.header .toptxt{ position: absolute; left: 150rem; height: 70rem; width:180rem; font-family: xq; color: #fff1b1; }
.header .toptxt h1{ font-size: 33rem; line-height: 1; margin-top: 5rem; background: url(../img/header/line.png) center bottom no-repeat; background-size: 100% auto; padding-bottom: 5rem;white-space: nowrap; }
.header .toptxt span{ display: block; font-size: 20rem; margin-top: -3rem;white-space: nowrap; }

.header .hd-content { position: absolute; right:10rem; height: 100%; width: auto; display: flex; align-items: center; top: -46rem; }
.header .yuyanbtn { width: 42rem; height: 42rem; margin-right:15rem; background: url(../img/header/yuyan.png) center center no-repeat; background-size: 100% auto; }
.header .zhuce { font-size: 30rem; width: 260rem; height:50rem; margin-right: 10rem; text-align: center; line-height: 50rem; color: #442315; text-transform: uppercase; background: url(../img/header/top-btnbg.png) center center no-repeat; background-size: 100% auto; }
.header .ngBar { width: 39rem; height:33rem; background: url(../img/header/navicon1.png) center center no-repeat; background-size: 100% auto; }
.header .off{ background: url(../img/header/navicon2.png) center center no-repeat; background-size: 100% auto; }

.header .topMedia{position: absolute;right: 30rem;top: 80rem;height: 70rem;width: auto;display: flex;align-items: center;justify-content: right;}
.header .topMedia a{height: 70rem;width: 70rem;margin-right: -20rem;}
.header .topMedia .steam{background: url(../img/header/s.png) center center no-repeat;background-size: 80rem auto;}
.header .topMedia .dy{background: url(../img/header/dy.png) center center no-repeat;background-size: 80rem auto;}
.header .topMedia .in{background: url(../img/header/in.png) center center no-repeat;background-size: 80rem auto;}
.header .topMedia .x{ background: url(../img/header/x.png) center center no-repeat; background-size: 80rem auto; }
.header .topMedia .f{ background: url(../img/header/f.png) center center no-repeat; background-size: 80rem auto; }

.header .topMedia .y{ background: url(../img/header/y.png) center center no-repeat; background-size: 80rem auto; }


/* 菜单 */
.menu-panel { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 999; display: none; }
.menu-panel .dialog-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 628rem; height: 863rem; background: url(../img/header/dialog_bg.png) no-repeat center; background-size: 100% auto; box-sizing: border-box; padding-top: 60rem; }
.close-btn { position: absolute; top: -73rem; right: 0rem; width: 42rem; height: 42rem; background: url(../img/close.png) no-repeat center; background-size: contain; cursor: pointer; }
.menu-panel .menu-list{list-style: none;padding: 0;margin: 10rem auto 0;width: 604rem;}
.menu-panel .menu-list li {height: 83rem;line-height: 83rem;font-size: 30rem;text-align: center;}
.menu-panel .menu-list li.active { background: url(../img/header/menu_panel_on.png) no-repeat center; background-size: 100% 100%; }

.menu-panel .menu-list li a{ color: #f5db81; }
.menu-panel .menu-list li.active  a{ color: #fff5cf; }

.social-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30rem;
  margin: 0rem auto;
  padding-top: 50rem;
  background: url(../img/header/line2.png) center top no-repeat;
  background-size: 548rem auto;
}

.social-list li { width: 55rem; height: 55rem; }

.social-list a { display: block; width: 100%; height: 100%;  background-repeat: no-repeat; background-position: center; }

.social-list .steam-icon { background-image: url(../img/header/s-icon.png);background-size: 51rem auto; }
.social-list .dy-icon { background-image: url(../img/header/dy-icon.png);background-size: 50rem auto; }
.social-list .in-icon { background-image: url(../img/header/in-icon.png);background-size: 45rem auto; }

.social-list .x-icon { background-image: url(../img/header/x_icon.png);background-size: 50rem auto; }

.social-list .f-icon { background-image: url(../img/header/f_icon.png);background-size: 51rem auto; }

.social-list .y-icon { background-image: url(../img/header/y_icon.png); background-size: 53rem auto;}



.follow_we{ color: #f5db81; width: 100%; text-align: center; font-size: 25rem; }








/* 语言 */

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

.langbox .langContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 241rem;
  height: 718rem;
  background: url(../img/header/langbg.png) no-repeat center;
  background-size: 100% auto;
  box-sizing: border-box;
  padding-top: 130rem;
}

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

.langbox   .showyy li {
    cursor: pointer;
     height: 70rem;
    line-height: 70rem;
    width: 100%;
    color: #ffecac;
    font-size: 32rem;
    text-indent: 65rem; 
    position: relative;
}
.langbox   .showyy li::after{
        content: '';
        position: absolute;
        top: 50%;
        transform: translate(0,-50%);
        left:38rem;
        width: 27rem;
        height: 27rem;
        background: url(../img/header/langDian.png) left center  no-repeat;
        background-size: 12rem auto;
    }


    .langbox  .showyy li.on {  color: #fff;}

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








/* lang */
.lang_en .header .toptxt h1{font-size: 24rem;margin-top: 10rem;    padding-bottom: 12rem;    white-space: nowrap;}
.lang_en .header .toptxt span{font-size: 16rem;}
.lang_en .zhuce .poptext .sub{font-size: 22rem;line-height: 72rem;}
.lang_en  .header .zhuce{font-size: 17rem;line-height: 54rem;}
.lang_en .page2 .dec p{text-indent: 0;}
.lang_en .page5 .jlbox .jlSwiper p{  margin-top: 20rem;}
.lang_en .page5 .jlbox .jlSwiper .frist p:nth-child(3){margin-top: 4rem;}
.lang_en .page5 .jlbox .jlSwiper .frist p:nth-child(4){margin-top: 8rem;}
.lang_en .page5 .jlbox .jlSwiper .second p:nth-child(3){margin-top: 4rem;}
.lang_en .page5 .jlbox .jlSwiper .second p:nth-child(4){margin-top: 8rem;}
.lang_en .page5 .pl-message p{
  font-size: 16rem;
}
.lang_en .page5 .pl-message .pl-text{
  margin-top: 15rem;
}
.lang_en .page3  .swiper-slide .thumbs_name{
  font-size: 12rem;
  line-height: 28rem;
}
.lang_en .page5 .txt p{
  font-size: 12rem;
}
.lang_en .page6 .more{
  line-height: 57rem;
 
}
/* zh-tw */
.lang_zh-tw .page1{ 
  width: 100%;
  background-image: url(../img/page1/bg_zh-tw.jpg);
  }
.lang_zh-tw .menu-panel .menu-list li{font-size: 45rem;}
.lang_zh-tw .follow_we{font-size: 40rem;}
.lang_zh-tw .page5 .jlbox .jlSwiper p{    font-size: 18rem;margin-top: 15rem;}

.lang_zh-tw .zhuce .poptext .tips{      top: 56rem;  font-size: 20rem;}
.lang_zh-tw .zhuce h3{margin-top: 35rem;}
.lang_zh-tw .zhuce .poptext h4{font-size: 20rem; line-height: 25rem;}
.lang_zh-tw .zhuce .poptext .lookpp em{font-size: 20rem;    vertical-align: top;}
.lang_zh-tw .zhuce .poptext .sub{font-size: 40rem;}

.lang_zh-tw .page6 .btn{line-height: 60rem;font-size: 30rem;}

.lang_zh-tw .pagebottom .footer .zctxt{font-size: 16rem;}
.lang_zh-tw .header .toptxt h1{
  font-size: 22rem;
}
.lang_zh-tw  .header .toptxt span{
  font-size: 18rem;

}
.lang_zh-tw .page3 .desc-text{
  font-family: xq;
}
.lang_zh-tw .page6 .more{
  font-size: 25rem;
 
}
/* ja */
.lang_ja .page1{ 
  width: 100%;
  background-image: url(../img/page1/bg_ja.jpg);
  }
.lang_ja .menu-panel .menu-list li{font-size: 35rem;}
.lang_ja .follow_we{font-size: 30rem;}
.lang_ja .header .zhuce{font-size: 20rem;}

.lang_ja .page5 .jlbox .jlSwiper p{font-size: 15rem;margin-top: 20rem;}
.lang_ja .page5 .jlbox .jlSwiper .frist p:last-child{margin-top: 4rem;}
.lang_ja .page5 .pl-message p{
  font-size: 22rem;
}
.lang_ja .zhuce .poptext .tips{    top: 65rem;    font-size: 14rem;}
.lang_ja .page6 .btn{line-height: 60rem;}
.lang_ja .pagebottom .footer .zctxt{font-size: 16rem;margin-left: 10rem;}
.lang_ja .header .toptxt h1{
  font-size: 18rem;
}
.header .toptxt{
  display: flex ;
      flex-direction: column;
      justify-content: center;
}
.lang_ja .header .toptxt span{
  font-size: 13rem;

}
.lang_ja .page3 .desc-text{
  font-family: jafont;
}
.lang_ja .page5 .txt p{
  font-size: 14rem;
}
/* ko */
.lang_ko .page1{ 
  width: 100%;
  background-image: url(../img/page1/bg_ko.jpg);
  }
.lang_ko .menu-panel .menu-list li{font-size: 35rem;}
.lang_ko .follow_we{font-size: 30rem;}
.lang_ko .header .zhuce{font-size: 23rem;}
.lang_ko .zhuce .poptext h4{top: 6rem;}
.lang_ko .zhuce .poptext .tips{font-size: 16rem;    top: 57rem;}
.lang_ko .zhuce .poptext .lookpp em{font-size: 14rem;}
.lang_ko .zhuce .poptext .sub{font-size: 30rem;}
.lang_ko .page5 .jlbox .jlSwiper p{font-size: 15rem;margin-top: 20rem;}
.lang_ko .page5 .jlbox .jlSwiper .frist p:nth-child(3){margin-top: 15rem;}
.lang_ko .page5 .jlbox .jlSwiper .frist p:nth-child(4){margin-top: 8rem;}
.lang_ko .page6 .btn{line-height: 60rem;}
.lang_ko .pagebottom .footer .zctxt{font-size: 16rem;}
.lang_ko .header .toptxt h1{
  font-size: 18rem;
}
.lang_ko .header .toptxt span{
  font-size: 13rem;
}
.lang_ko .page5 .txt p{
  font-size: 15rem;
}
/* th */
.lang_th .page1{ 
  width: 100%;
  background-image: url(../img/page1/bg_th.jpg);
  }
.lang_th .header .zhuce{font-size: 20rem;}
.lang_th .page5 .jlbox .jlSwiper p{font-size: 14rem;margin-top: 20rem;}
.lang_th .menu-panel .menu-list li{font-size: 35rem;}
.lang_th  .follow_we{font-size: 30rem;}

.lang_th .zhuce .poptext h4{font-size: 18rem;}
.lang_th .zhuce .poptext .tips{font-size: 16rem;    top: 57rem;}

.lang_th .zhuce .poptext .lookpp em{font-size: 14rem;}
.lang_th .zhuce .poptext .sub{font-size: 22rem;}
.lang_th .pagebottom .footer .zctxt{font-size: 14rem;}
.lang_th .header .toptxt h1{
  font-size: 23rem;
}
.lang_th .header .toptxt span{
  font-size: 15rem;
}
.lang_th .page5 .txt p{
  font-size: 14rem;
}