/* CSS Document */
@charset "utf-8";
*:focus {
    outline: none;
}
html, body {
    height: 100%;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fiedldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset, img {
    border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var, i {
    font-style: normal;
    font-weight: normal;
}
ol, ul, li {
    list-style: none;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
body {
    font-family: "Arial";
    color: #666;
    font-size: 16px;
    background: #f2f2f2;
}
input, select, textarea, button {
    vertical-align: middle;
    font-family: "Arial";
}
a, a:link {
    text-decoration: none;
    outline: none;
}
.hide{ display: none;}
@font-face{ font-family: gamefont; src:url(../font/Avara.ttf);}
.wrap{ width:100%; max-width:1920px; min-width:1050px; height:auto; _width:expression(this.scrollWidth > 1920 ? "1920px" : (this.scrollWidth < 1050? "1050px" : "auto")); overflow:hidden; margin:0 auto; position: relative;}
.top{ height: 264px; padding-top: 614px; background: url(../img/top.jpg) center top no-repeat; overflow: hidden; position: relative; }
.top::after{ display: block; content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; background: rgba(0,0,0,.2); }
.video-bg{ width: 1920px; position: absolute; top: 78px; left: 50%; margin-left: -960px; }
.header{ height: 50px; padding-top: 28px; background: #000; position: fixed; z-index: 10; left: 0; right: 0; width: 100%; top: 0; padding-left: 56px; }
.header a{ display: block; float: left; width: 40px; height: 22px; background: url(../img/icon.png) 0 0 no-repeat; margin-right: 40px; }
.header a.head2{ width: 70px; background-position: -46px 0; }
.header a.head1.on{ background-position: 0 -26px; }
.header a.head2.on{ background-position: -46px -26px; }
.order{ padding: 20px 20px 10px; background: rgb(0,0,0,.8); width: 480px; margin: 0 auto; border-radius: 20px; font-size: 18px; position: relative; z-index: 3; }
.order-list{ overflow: hidden; margin-bottom: 10px; position: relative; }
.inputs{ display: inline-block; width: 277px; padding-left: 53px; height: 58px; line-height: 58px; background: #fff; border: 0; border-radius: 10px; font-size: 18px; color: 020919; }
.inputs:-moz-placeholder{ color: #020919;}
.inputs::-moz-placeholder{ color: #020919;}
.inputs:-ms-input-placeholder{ color: #020919;}
.inputs::-webkit-input-placeholder{ color: #020919;}
.email-icon{ display: block; position: absolute; width: 23px; height: 20px; background: url(../img/icon.png) -124px 0 no-repeat; left: 20px; top: 19px; }
.order-btn{ display: block; width: 140px; height: 58px; text-align: center; line-height: 58px; color: #fff; float: right; border-radius: 10px; background: #e97549; background: -webkit-linear-gradient(top right, #f8b141, #e97549); background: -o-linear-gradient(top right, #f8b141, #e97549); background: -moz-linear-gradient(top right, #f8b141, #e97549); background: linear-gradient(to top right, #f8b141, #e97549); }
.tel-list input[type=radio]{ display: none;}
.tel-list input[type=radio] + label{ cursor: pointer; display: inline-block; color: #fff; margin: 10px 55px 0 20px; }
.tel-list input[type=radio] + label::before{ display: inline-block; width: 20px; height: 20px; background: url(../img/icon.png) -179px 0 no-repeat; content: ''; vertical-align: middle; margin: -3px 5px 0 0; }
.tel-list input[type=radio]:checked + label::before{ background-position: -153px 0;}
.steam-btn{ display: block; float: right; width: 140px; height: 40px; border-radius: 10px; background: #f4f4f4; line-height: 40px; text-align: center; color: #07101b; font-size: 16px; }
.steam-btn::before{ display: inline-block; width: 32px; height: 32px; background: url(../img/icon.png) -205px 0 no-repeat; content: ''; vertical-align: middle; margin: -2px 5px 0 0; }
.con1{ height: 1040px; background: url(../img/index1.jpg) center top no-repeat; padding-top: 94px; }
.title{ width: 236px; height: 32px; background: url(../img/title.png) 0 0 no-repeat; }
.title.tit1{ width: 486px; height: 37px; background-position: 0 0; margin: 0 auto; }
.title.tit2{ width: 172px; height: 37px; background-position: 0 -43px; margin: 0 auto; }
.title.tit3{ background-position: 0 -88px; margin: 0 auto;}
.title.tit4{ background-position: 0 -128px;}
.title.tit5{ background-position: 0 -170px;}
.title.tit6{ background-position: 0 -215px;}
.title.tit7{ background-position: 0 -255px;}
.title.tit8{ background-position: 0 -297px;}
.title.tit9{ background-position: 0 -337px;}
.title.tit10{ background-position: 0 -378px; margin-top: 80px;}
.title.tit11{ background-position: 0 -417px; width: 72px; margin-bottom: 15px;}
.title.tit12{ background-position: -81px -417px; width: 76px; margin-top: 100px;}
.title.tit13{ background-position: -166px -417px; width: 52px;}
.title.tit14{ background-position: -227px -417px; width: 94px;}
.title.tit15{ background-position: -185px -43px; width: 154px; height: 38px; margin: 0 auto 60px;}
.main{ width: 1000px; margin: 0 auto; }
.intro{ color: #666; font-size: 30px; line-height: 40px; }
.intro p{ margin-top: 46px; }
.index-video{ height: 563px; overflow: hidden; border-radius: 20px; background: #000; margin-top: 48px; }
.con2{ padding: 100px 0 0; height: 757px; background: url(../img/index3.jpg) center top no-repeat; overflow: hidden; }
.con3{ padding-top: 100px; height: 1205px; background: url(../img/index2.jpg) center top no-repeat; }
.feature-main{ width: 1000px; overflow: hidden; margin: 60px auto 118px;}
.feature{ height: 563px; overflow: hidden; border-radius: 20px; }
.feature .swiper-slide img{ display: block; width: 1000px; height: 563px; }
.feature-prev,.feature-next{ width: 75px; padding-right: 5px; height: 80px; border-radius: 50%; position: absolute; left: 40px; top: 242px; z-index: 3; cursor: pointer; }
.feature-next{ left: auto; right: 40px; padding: 0 0 0 5px; }
.feature-prev i,.feature-next i{ display: block; width: 17px; height: 31px; background: url(../img/icon.png) -124px -26px no-repeat; margin: 25px auto 0; }
.feature-next i{ background-position: -154px -26px; }
.feature-prev:hover,.feature-next:hover{ background: rgba(255,255,255,.4); }
.feature-prev.swiper-button-disabled,.feature-next.swiper-button-disabled{ cursor: default; opacity: 0.6;}
.feature-page{ margin-top: 40px; text-align: center; }
.feature-page .swiper-pagination-bullet{ width: 8px; height: 8px; border-radius: 4px; background: #000; margin: 0 4px; opacity: 1; cursor: pointer; }
.feature-page .swiper-pagination-bullet.swiper-pagination-bullet-active{ width: 20px; background: #f8b141; }
.footer{ padding-top: 90px; width: 1000px; margin: 0 auto; overflow: hidden; font-size: 16px; }
.link{ overflow: hidden; width: 616px; margin: 0 auto 35px; }
.link li{ width: 74px; float: left; margin: 0 40px; }
.footer-info{ padding-top: 30px; border-top: 1px solid #2c2a27; color: #999; }
.footer-left{ width: 450px; float: left; display: flex; align-items: center; }
.footer-left span{ display: inline-block; width: 1px; height: 59px; background: #888684; margin: 0 30px 0 20px; }
.footer-right{ width: 500px; float: right; text-align: right; padding-top: 15px; }
.footer-right p{ margin-bottom: 20px; }
.footer-right a{ color: #fff; }
.footer-right span{ background: #878684; margin: -2px 20px 0; display: inline-block; height: 13px; width: 1px; vertical-align: middle; }
.game{ width: 1000px; height: 562px; background: url(../img/game.jpg) no-repeat; margin: 0 auto; border-radius: 20px; overflow: hidden; position: relative; font-family: 'gamefont'; color: #ebe0cb; }
.game-left{ position: absolute; left: 28px; top: 89px; z-index: 6; width: 223px; }
.game-nav{ width: 91px; float: left; background: url(../img/leftnav.png) 0 0 no-repeat; height: 288px; }
.game-nav li{ height: 46px; padding-top: 2px; position: relative; cursor: pointer; }
.game-nav li p{ width: 44px; height: 42px; padding-top: 2px; background: url(../img/icon.png) -114px -62px no-repeat; margin-left: 25px; position: relative; z-index: 2;}
.game-nav li p img{ display: block; width: 30px; margin: 0 auto; }
.game-nav li:hover{ background: #4b4135; }
.game-nav li.on::after{ display: block; content: ''; width: 107px; height: 48px; position: absolute; left: 0; top: 0; background: url(../img/icon.png) 0 -53px no-repeat; }
.game-hero{ overflow: hidden; float: left; width: 115px; padding: 3px 0 12px 16px; background: url(../img/leftnav.png) -91px 0 no-repeat; }
.game-hero li{ width: 88px; height: 88px; padding: 12px 0 0 12px; margin: -3px 0 -8px; background: url(../img/game_icon.png) 0 -105px no-repeat; }
.game-hero li img{ display: block; width: 76px; cursor: pointer; }
.game-hero li.on{ background-position: 0 0; }
.game-info{ width: 1000px; height: 562px; position: relative; }
.story-btn{ display: block; width: 179px; height: 50px; position: absolute; z-index: 3; left: 27px; bottom: 36px; background: url(../img/icon.png) 0 -111px no-repeat; }
.game-rw{ position: absolute; bottom: 155px; left: 76px; width: 650px; top: 0; display: flex; align-items: flex-end; justify-content: center; }
.game-rw img{ }
.rw-name{ position: absolute; bottom: 102px; left: 288px; width: 240px; font-size: 24px; color: #e2d5b3; text-align: center; z-index: 3; }
.rw-name img{ display: inline-block; width: 30px; vertical-align: middle; margin: -2px -5px 0 0; }
.detail{ position: absolute; bottom: 30px; left: 305px; z-index: 3; }
.heart{ float: left; margin-right: 22px; font-size: 14px; padding-top: 12px; }
.heart::before{ display: inline-block; content: ''; width: 26px; height: 23px; background: url(../img/icon.png) -176px -27px no-repeat; vertical-align: middle; margin: -3px 5px 0 0; }
.skill{ float: left; }
.skill li{ width: 48px; float: left; margin-right: 14px; position: relative; }
.skill-img img{ width: 48px; cursor: pointer; }
.skill-text{ position: absolute; left: 43px; top: -30px; width: ; padding: 0 10px; width: 353px; height: 100px; background: url(../img/tips.png) no-repeat; z-index: 3; display: none; }
.skill-text h4{ font-size: 16px; color: #ceac6b; height: 36px; line-height: 36px; border-bottom: 1px solid #524739; overflow: hidden; }
.skill-text p{ font-size: 14px; color: #ebe0cb; line-height: 18px; padding: 5px; }
.skill-text span{ color: #ceac6b; }
.skill li:hover .skill-text{ display: block; }
.secret{ overflow: hidden; position: absolute; top: 66px; right: 12px; z-index: 3; }
.secret li{ width: 211px; float: left; }
.secret li img{ display: block; width: 100%; }
.secret h4{ width: 159px; height: 32px; background: url(../img/icon.png) 0 -166px no-repeat; margin: 0 0 5px 10px; }
.secret h4.gbt2{ background-position: 0 -204px; }
.story{ position: absolute; z-index: 7; background: rgb(0,0,0,.6); left: 0; right: 0; bottom: 0; top: 0; display: none; }
.story-main{ width: 303px; height: 290px; padding: 161px 73px 119px 94px; background: url(../img/detail.png) no-repeat; margin-left: 265px; float: left; }
.story-close{ display: block; float: left; width: 50px; height: 38px; background: url(../img/icon.png) -163px -65px no-repeat; margin: 35px 0 0 -22px; }
.story-info{ height: 290px; overflow: auto; font-size: 16px; color: #643a0c; line-height: 24px; }
.story-info p{ width: 286px; padding: 10px 0; }
.story-info::-webkit-scrollbar{ width: 11px; height: 1px;}
.story-info::-webkit-scrollbar-thumb{ background: #a5916b;}
.story-info::-webkit-scrollbar-track{ background: #c9b485;}
.story-info b{ color: #984f00; }
.banner{ height: 650px; background: url(../img/top.jpg) center top no-repeat; }
.inner{ background: #17140f url(../img/inner.jpg) center bottom no-repeat; padding-top: 100px; }
.press{ overflow: hidden; width: 1000px; margin: 0 auto 80px; }
.press-left{ width: 320px; float: left; }
.press .title{ margin-bottom: 12px; }
.press p{ font-size: 24px; color: #ccc; line-height: 30px; }
.press-left p{ margin-bottom: 45px; }
.press-right{ width: 680px; float: left; }
.press-right p{ margin-bottom: 25px; }
.press-right p.fw{ font-weight: bold; color: #fff; padding-top: 10px; }
.inner-text{ font-size: 24px; color: #ccc; }
.download{ display: block; height: 50px; line-height: 50px; position: relative; background: #fff; margin-top: 20px; border-radius: 10px; padding: 0 30px; color: #181510; font-size: 24px; }
.download:hover{ background: #ccc; }
.download::after{ display: block; content: ''; position: absolute; width: 30px; height: 26px; background: url(../img/icon.png) -242px 0 no-repeat; top: 12px; right: 30px; }
.photos{ overflow: hidden; margin: 30px 0 80px -20px; width: 1020px; }
.photos li{ width: 490px; height: 276px; overflow: hidden; float: left; border-radius: 10px; margin: 0 0 20px 20px; display: flex; align-items: center; position: relative; }
.photos li img{ display: block; width: 490px; min-height: 276px; }
.logos{ overflow: hidden; margin: 35px 0 0; }
.logos li{ margin-bottom: 20px; }
.contact{ font-size: 24px; color: #ccc; padding-bottom: 220px; }
.contact p{ font-size: 26px; color: #fff; font-weight: bold; margin: 30px 0 5px; }
.contact a{ color: #ccc;}
.privacy{ font-size: 24px; color: #ccc; line-height: 36px; padding: 30px 0 170px; }
.privacy p{ margin-bottom: 30px; }
.privacy a,.contact a.ablue{ color: #3682ff; border-bottom: 1px solid #3682ff; padding-bottom: 1px; }
.site{ height: 80px; }
.fade{ position:fixed; top: 0%; left: 0%; background: black; z-index:13; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=85); width:100%; height:100%; display:none;}
.alert{ position:fixed; z-index:15; display:none;}
.obtain{ width: 566px; height: 376px; background: url(../img/obtain.png) no-repeat; }
.alert-close{ position: absolute; display: block; width: 50px; height: 38px; background: url(../img/icon.png) -163px -65px no-repeat; top: 37px; right: -30px; }
.obtain-info{ font-size: 20px; line-height: 25px; color: #643a0c; padding: 200px 0 0 20px; width: 400px; margin: 0 auto; }